Gulp

gulp是什么？一个基于node的前端自动化工作构建工具，应用经典回调+链式调用的形式实现工作的自动化 (src.pipe(...).pipe)，gulp其实和webpack很类似，然而gulp侧重点不同，gulp更偏重前端流程自动化、工作执行（通过工作使开发提效），就像一条流水线。而webpack则是更偏重用于打包前端资源，所有皆可打包成模块。官网文档：https://www.gulpjs.com.cn/ gulp的利用场景？为什么用gulp？1.构建前端自动化流程比拟好的计划，一些反复的人工操作能够让gulp去做，并且代码量不大，晋升开发效率(自动化实现前端工作流工作：单元测试、优化、打包)。 2.与其余构建工具相比开发简略，易上手。基于nodejs 文件系统流，运行速度快。 3.更适宜原生前端我的项目的打包。有助于了解前端工程化。 4.公布通用型组件或者npm库的时候能够用gulp来进行打包。 gulp的装置在你的我的项目目录中执行 npm install -g gulp 在根目录下创立gulp的配置文件gulpfile.js，install一下文件中的依赖，之后就能够间接在这个文件中定义咱们的gulp工作了 var gulp=require("gulp");//引入gulp模块gulp.task('default',function(){ console.log('hello world');});而后间接终端中进入当前目录运行 gulp 命令就开始执行工作了。gulp前面也能够加上要执行的工作名，例如gulp task1，如果没有指定工作名，则会执行工作名为default的默认工作。gulp罕用的几个api ： task, series, parallel, src, pipe, dest task: 创立一个工作series：程序执行多个工作prallel：并行执行多个工作src：读取数据源转换成streampipe：管道-能够在两头对数据流进行解决dest：输入数据流到指标门路gulp理论利用之原生前端我的项目打包：以一个jQuery原生我的项目为例子，目录构造： 门路表：因为我的项目构造有点非凡，资源比拟扩散，html的js、css保留在对应模块文件夹中。而公共的js、css却在html的里面的文件中，所以就设置了2个入口（以js资源为例）：一个根目录入口、一个html入口   scriptsjs: {//根目录入口    src: [      "./temp/js/**/*.js",//temp/js/之下的所有文件夹下的js      "!./temp/**/*.min.js", //不匹配压缩过的js，避免二次压缩      "!./temp/js/common.js",       "!./temp/mpcc/**/*.js",//这个文件不须要压缩解决所以不匹配    ],    dest: destDir + "/js",//进口  },  scriptshtml: {//html入口    src: [      "./temp/html/**/*.js",      "!./temp/html/BasicSet/RoleManage/js/*.js",//不匹配      "!./temp/html/BasicSet/UserAuthorization/js/*.js",    ],    dest: destDir + "/html",  },你没看错，是不是有点像webpack中的entry和output。* 通配符是代表所有文件夹、！是代表不匹配。这里能够本人选哪些文件不须要进行匹配 ...

一个构gulp自动化构建工作流案例须要对款式文件，js文件，html文件，图片字体文件，其余额定文件顺次构建工作，并在此过程中实现对文件的压缩合并 const { src, dest, series, parallel, watch,} = require('gulp');const loadPlugins = require('gulp-load-plugins')const plugins = loadPlugins() // 加载插件模块const sass = require('gulp-sass')(require('sass'));// sass.compiler = require("node-sass");// const plugins.babel = require('gulp-babel')// const plugins.swig = require('gulp-swig')// const plugins.imagemin = require('gulp-imagemin')const del = require('del') // 革除文件插件const browserSync = require('browser-sync') // 提供一个能够热更新的开发服务器const bs = browserSync.create() // 创立一个开发服务器const data = `your template data`// 清理dist文件夹const clean = () => { return del(['dist', 'temp'])}const style = () => { // base参数保留了src目录前面的基准门路 return src('src/assets/styles/*.scss', { base: 'src' }) .pipe(sass({ outputStyle: 'expanded' })) // 齐全开展 .pipe(dest('temp')) // 放到长期目录 .pipe(bs.reload({ stream: true })) // 外部文件流信息推到浏览器}const script = () => { return src('src/assets/scripts/*.js', { base: 'src' }) .pipe(plugins.babel({ presets: ['@babel/preset-env'] // 蕴含了最新的js语法 })) .pipe(dest('temp')) .pipe(bs.reload({ stream: true }))}const page = () => { return src('src/**/*.html', { base: 'src' }) // **代表了src目录下任意html文件 .pipe(plugins.swig({ data, // 动态数据模板编译输入 defaults: { cache: false // 避免模板缓存导致页面不能及时更新 } })) .pipe(dest('temp')) .pipe(bs.reload({ stream: true }))}const image = () => { return src('src/assets/images/**', { base: 'src' }) .pipe(plugins.imagemin()) .pipe(dest('dist'))}const font = () => { return src('src/assets/fonts/**', { base: 'src' }) .pipe(plugins.imagemin()) .pipe(dest('dist'))}const extra = () => { // 拷贝额定文件 return src('public/**', { base: 'public' }) .pipe(dest('dist'))}const server = () => { watch('src/assets/styles/*.scss', style) watch('src/assets/scripts/*.js', script) watch('src/*.html', page) // 上面三个工作，只须要上线的时候公布进来即可,开发阶段的构建须要缩小构建，进步构建效率 // watch('src/assets/image/**', image) // watch('src/assets/fonts/**', font) // watch('public/**', extra) watch([ 'src/assets/images/**', 'src/assets/fonts/**', 'public/**' ], bs.reload) bs.init({ notify: false, port: 2180, // files: 'dist/**', // 监听文件夹 srcipt,style,page因为bs.realod,这里不必再监听 // open: false, // 勾销关上浏览器 server: { baseDir: ['temp', 'src', 'public'], // 服务器运行根目录，数组内为顺次寻找目录 routes: { '/node_modules': 'node_modules' } } })}const useref = () => { return src('temp/*.html', { base: 'temp' }) .pipe(plugins.useref({ searchPath: ['temp', '.'] })) // 解决构建正文,合并到一个文件中 // 压缩html,js,css .pipe(plugins.if(/\.js$/, plugins.uglify())) .pipe(plugins.if(/\.css$/, plugins.cleanCss())) .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true, // 解决html文件空格 minifyCSS: true, minifyJS: true }))) .pipe(dest('release'))}const compile = parallel(style, script, page) // 并行执行三个工作，组合为一个compile工作// build之前执行clean工作,上线之前执行buildconst build = series(clean, parallel(series(compile, useref), image, font, extra));const develop = series(compile, server)module.exports = { build, clean, develop,}

gulp简介,根本应用Gulp.js 是一个自动化构建工具,开发者能够应用它在我的项目开发过程中主动执行常见工作。 yarn add gulp 装置gulp的时候会装置gulp-cli。gulpfile.js中导出一个函数,最新的gulp中勾销了同步代码模式，每一个工作都是异步工作，最初须要调用回调函数或其余形式标记工作实现。如例子中如果没有done，会报错.如果工作名是default，运行时的命令和grunt相似，间接运行yarn gulp即可。 exports.foo = done => { console.log("foo task") done() // 标识工作实现 }gulp4.0中仍然保留了之前版本的工作导出形式,然而这种形式曾经不举荐，举荐导出函数的形式应用gulp const gulp = require('gulp') gulp.task('bar', done => { console.log("bar task") done() })series,parallel组合工作gulp能够通过series,parallel来组合工作，series串行执行,parallel并行执行，比方js,css在编译时就能够并行执行，比方部署工作时先要执行编译工作再进行其余工作，工作串行执行。根本应用形式如下 const { series, parallel} = require('gulp')const task1 = done => { setTimeout(() => { console.log("task1 working") done() }, 1000);}const task2 = done => { setTimeout(() => { console.log("task2 working") done() }, 1000);}const task3 = done => { setTimeout(() => { console.log("task3 working") done() }, 1000);}exports.foo = series(task1, task2, task3)exports.bar = parallel(task1, task2, task3)串行并行 ...

在 Gulp 的官网文档中，Gulp 的工作都是写在 gulpfile.js 这一个文件中的，如果工作数量不多，这并不会有什么问题，但当工作数量较多时，会造成代码可读性差，难以保护，多人合作时还会容易造成抵触。因而，更好的解决形式是把 Gulp 的代码结构化。 开始结构化https://github.com/QMUI/qmui_web 这是一个前端框架，次要由一个 SASS 办法合集与内置的工作流形成，其中工作流局部提供了一系列的工作用于解决前端流程，并且因为是可配置的框架，须要读取配置文件，因而尽管原有的 gulpfile.js 的代码并不宏大，但依然须要进行结构化解决，本文将会具体阐明如何进行结构化解决。 次要的思路是把 gulpfile.js 中的工作扩散到独立的文件中编写，而后在 gulpfile.js 中引入这些 task。因而最简便的办法是把每个 task 独自写在独立的文件中，以 task 名命名文件名，在 gulpfile.js 中把这些文件读取进去，例如： workflow/task/clean.jsvar del = require('del');gulp.task('clean', '清理多余文件（清理内容在 config.json 中配置）', function() { // force: true 即容许 del 管制本目录以外的文件 del(common.config.cleanFileType, {force: true}); console.log(common.plugins.util.colors.green('QMUI Clean: ') + '清理所有的 ' + common.config.cleanFileType + ' 文件');});gulpfile.jsvar gulp = require('gulp'), requireDir = require('require-dir');// 遍历目录，加载 task 代码requireDir('./workflow/task', { recurse: true });gulp.task('default', ['clean']);这种办法操作起来比较简单，同时根本不须要改变原有的代码，只需对 gulpfile.js 稍作改变即可。但同时也引入了一些问题，例如，文章结尾说过的，像 QMUI 这类须要读取公共配置文件的需要，这里就无奈解决，各个工作中如果须要引入配置表，都须要独自引入，同时像工具办法这类内容也会反复引入，造成节约。因而实际上，clean.js 中也不是像下面的例子那样编写的，而是采纳 module 的形式拆分工作。 ...

本节咱们来看一下 Gulp 中的 API 办法，如下所示： 办法形容src()创立用于从文件系统读取 Vinyl 对象的流dest()创立一个用于将 Vinyl 对象写入到文件系统的流symlink()创立一个流（stream），用于连贯 Vinyl 对象到文件系统lastRun()检索在以后运行过程中胜利实现工作的最初一次工夫series()将工作函数和/或组合操作组合成更大的操作，这些操作将按程序顺次执行parallel()将工作性能和/或组合操作组合成同时执行的较大操作watch()监听 globs 并在产生更改时运行工作task()在工作零碎中定义工作registry()容许将自定义的注册表插入到工作零碎中，以期提供共享工作或加强性能tree()获取当前任务依赖关系树——在极少数状况下须要它Vinyl虚构的文件格式Vinyl.isVinyl()检测一个对象（object）是否是一个 Vinyl 实例Vinyl.isCustomProp()确定一个属性是否由 Vinyl 在外部进行治理咱们在应用 gulp 时，个别只须要用到 4 个 API，别离是 gulp.src()、gulp.dest()、gulp.task()、gulp.watch()，上面咱们具体介绍一个这 4 个罕用 API 的应用。 gulp.src()办法gulp.src() 办法用于创立一个流。然而要留神的是这个流里的内容不是原始的文件流，而是一个虚构文件对象流（vinyl files），这个虚构文件对象中存储着原始文件的门路、文件名、内容等信息。 语法如下所示： gulp.src(globs, [options])globs ：文件匹配模式（类型正则表达式），用来匹配文件门路（包含文件名），也能够间接指定某个具体的文件门路。options：可选参数，通常状况下不须要用到。示例： 例如上面这个例子，将 input 文件夹中的 .js 文件复制到 output 文件夹中： const { src, dest } = require('gulp');function copy() { return src('input/*.js') .pipe(dest('output/'));}exports.copy = copy;执行 gulp copy 命令后，文件胜利被复制。 gulp.dest()办法gulp.dest() 办法能够创立一个用于将 Vinyl 对象写入到文件系统的流。 语法如下： gulp.dest(path[ , options])path：为写入文件的门路。options：可选的参数对象，通常用不到。gulp.dest() 办法是和 gulp.src() 办法搭配应用的，例如上述这个复制文件的示例。 ...

后面咱们讲到在学习压缩 JS、CSS、图片等文件时，须要用到一些相干的插件。Gulp 提供了一些有用的插件来解决 HTML 和 CSS，JavaScript，图形以及一些其余内容。上面咱们来看一下 gulp 中的一些不同类型插件。 HTML和CSS插件插件形容autoprefixer主动蕴含 CSS 属性的前缀gulp-browser-sync用于监督 CSS 目录中的所有 HTML 和 CSS 文件，并在文件更改时对所有浏览器中的页面执行实时从新加载gulp-useref用于替换对非优化脚本或样式表的援用gulp-email-design创立 HTML 电子邮件模板，将 CSS 款式转换为内联gulp-uncss优化 CSS 文件和查找未应用和反复的款式gulp-csso是一个 CSS 优化器，能够最小化 CSS 文件，从而放大文件大小gulp-htmlmin最小化 HTML 文件gulp-csscomb用于制作 CSS 的款式格式化程序gulp-csslint它指定一个 CSS lintergulp-htmlhint指定一个 HTML 验证器JavaScript插件插件形容gulp-autopolyfiller它与 autoprefixer 雷同，包含 JavaScript 的必要 polyfillgulp-jsfmt用于搜寻特定的代码段gulp-jscs用于查看 JavaScript 代码款式gulp-modernizr指定了用户浏览器提供的 HTML，CSS 和 JavaScript 性能gulp-express启动了gulp express.js 网络服务器gulp-requirejs应用 require. js 将 require.js AMD 模块组合成一个文件gulp-plato生成复杂性剖析报告gulp-complexity剖析了代码的复杂性和可维护性fixmyjs修复了 JSHint 的后果gulp-jscpd用作源代码的复制/粘贴检测器gulp-jsonlint是 JSON 验证器gulp-uglify放大了 JavaScript 文件gulp-concat连贯 CSS 文件单元测试插件插件形容gulp-nodeunit运行 Gulp 的节点单元测试gulp-jasmine用于报告与输入相干的问题gulp-qunit为 QUnit 测试提供根本的控制台输入，并应用 PhantomJS 节点模块和 PhantomJS 运行器 QUnit 插件gulp-mocha指定了 Mocha 四周的薄包装并运行 Mocha 测试gulp-karma已在 Gulp 中弃用图形插件插件形容gulpicon从 SVG 生成精灵并将它们转换为 PNGgulp-iconfont与 Web 字体一起用于从 SVG 创立 WOFF，EOT，TTF 文件gulp-imacss将图像文件转换为数据 URI 并将它们放入单个 CSS 文件中gulp-responsive为不同的设施生成响应式图像gulp-sharp它用于更改和调整图像的方向和背景gulp-svgstore将 SVG 文件与元素组合成一个文件gulp-imagemin&gulp-tinypng用于压缩 PNG，JPEG，GIF，SVG 等图像gulp-spritesmith用于从一组图像和 CSS 变量创立 spritesheet编译器插件插件形容gulp-less为 Gulp 提供了大量插件gulp-sass为 Gulp 提供 SASS 插件gulp-compass为 Gulp 提供指南针插件gulp-stylus用于将手写笔保留在 CSS 中gulp-coffee为 Gulp 提供 coffeescript 插件gulp-handlebars为 Gulp 提供了把手插件gulp-jst在 JST 中提供下划线模板gulp-react将 Facebook React JSX 模板指定为 JavaScriptgulp-nunjucks在 JST 中指定 Nunjucks 模板gulp- dustjs在 JST 中指定了 Dust 模板gulp-angular-templatecache在 templateCache 中指定 AngularJS 模板其余插件gulp-clean 插件删除文件和文件夹，gulp-copy 插件将文件从源文件复制到新目的地。 ...

在理论利用中，咱们个别会应用 CSS 的预处理器来编写 CSS 代码，例如 Less 和 Sass 语言，通过将脚本解析成 CSS 的脚本语言，能够缩小 CSS 的反复，也能够节省时间。 本节咱们来学习如何通过 gulp 将 Less 和 Sass 编译成 CSS 代码。将 Less 编译成 CSS 须要应用 gulp-less 插件，将 Sass 编译成 CSS 须要用到 gulp-ruby-sass 插件。 将Less编译成CSS例如在我的项目根目录下的 less 文件夹中有一个 style.less 文件，文件内容如下所示： div{ color: #ccc; a{ color: white; font-size: 16px; } p{ font-size: 14px; line-height: 30px; }}咱们须要将这个 style.less 文件代码编译成 CSS 代码。 首先须要装置 gulp-less 插件，装置命令如下所示： npm install gulp-less装置好插件后，咱们能够在 gulpfile.js 文件中创立命令，代码如下所示： // 获取 gulpvar gulp = require('gulp')var gulp_less = require('gulp-less')gulp.task('less', function(cb) { gulp.src('less/*.less') .pipe(gulp_less()) .pipe(gulp.dest('dist/css')) cb()})而后咱们执行 gulp less 命令： ...

在理论我的项目中，除了 HTML、CSS、JS 等文件，还会用到大量的图片。压缩图片可升高图片文件大小，进步页面关上速度。 如何压缩图片 应用 gulp 来压缩图片能够应用上面两个插件： gulp-imagemin：压缩率不显著，能够解决多种图片格式，能够引入更多第三方优化插件。gulp-smushit：压缩率比拟大，只能解决 JPG 和 PNG。例如咱们所有的图片压缩到 dist 目录下的 image 文件夹中，上面咱们应用 gulp-imagemin 插件来实现图片的压缩，在我的项目中，除了 PNG 和 JPG 格局的图片，也有可能有其余格局的图片。 示例： 首先装置 gulp-imagemin 插件，命令如下所示： npm install --save-dev gulp-imagemin插件装置胜利后，咱们就能够在 gulpfile.js 文件中编写代码： // 获取 gulpvar gulp = require('gulp')// 获取 uglify 模块var imagemin = require('gulp-imagemin')// 压缩图片工作gulp.task('images', function(cb) { // 找到图片 gulp.src('image/*') .pipe(imagemin({ progressive: true, })) .pipe(gulp.dest('dist/image')) cb()})运行 gulp images 命令：

咱们除了能够应用 gulp 压缩 JS 文件，还能够压缩 CSS，压缩 CSS 代码能够升高 CSS 文件的大小，进步网页的关上速度。 压缩CSS文件应用 gulp 来压缩 CSS 文件的操作步骤和压缩 JS 文件差不多，后面咱们学习了如何压缩 JS 文件，那么再学习压缩 CSS 文件就会感觉很简略啦。 压缩 CSS 文件同样须要用到相应的插件，对于 gulp 的 CSS 压缩插件，一共有如下三个： gulp-cssnanogulp-minify-cssgulp-clean-css下面三个插件，因为 gulp-minify-css 当初曾经被标记为 deprecated，因为咱们能够应用其余两个插件。 例如咱们所有的 .css 文件压缩到 dist 目录下的 css 文件夹中，具体操作如下所示。 装置插件首先装置 gulp-clean-css 插件，命令如下所示： npm install gulp-clean-css如下图所示： 在gulpfile.js文件中编写代码插件装置胜利后，咱们就能够在 gulpfile.js 文件中编写代码。 示例：// 获取 gulpvar gulp = require('gulp')var cleancss = require('gulp-clean-css')gulp.task('testcss', function(cb) { gulp.src('css/*.css') .pipe(cleancss()) .pipe(gulp.dest('dist/css')) cb()})运行 gulp testcss 命令，压缩 CSS 文件：此时我的项目根目录下的 dist 目录中会生成一个 CSS 文件夹，被压缩的 CSS 文件就放在这个文件夹中。 ...

本节咱们学习如何应用 gulp 压缩 JS，在理论我的项目中，如果 JS 文件太大，那么可能导致页面加载变慢。所以咱们能够将这些 JS 文件进行压缩。咱们除了能够抉择应用各种工具手动来进行压缩，还能够通过 gulp 来实现 JS 文件的压缩。 压缩JS文件应用 gulp 来压缩 JS 文件，须要用到一个 gulp-uglify 插件，上面咱们一起来看一下，要如何压缩 JS 文件。 例如咱们要实现的工作是压缩 js 目录下的所有 .js 文件，将这些 JS 文件压缩到 dist 目录下的 js 文件夹中。 装置插件首先咱们须要装置 gulp-uglify 插件，关上命令行工具，或者间接在 VSCode 中关上终端。而后进入到 gulpfile.js 文件所在的目录下，如果你的我的项目中还没有这个文件，则须要创立这个文件哟，因为 gulp 的所有配置代码都写在 gulpfile.js 文件。。 如下图所示，在命令行工具中执行装置 gulp-uglify 插件的命令： npm install gulp-uglify 在gulpfile.js文件中编写代码插件装置胜利后，咱们就能够在 gulpfile.js 文件中编写代码，首先同样是利用 gulp 模块： // 获取 gulpvar gulp = require('gulp')而后获取 uglify 模块： var uglify = require('gulp-uglify')接着就能够通过 task() 办法创立压缩工作： gulp.task('script', function() { // 找到要压缩的js文件 gulp.src('js/*.js') // 压缩文件 .pipe(uglify()) // 将压缩后的文件存到只指定目录 .pipe(gulp.dest('dist/js'))})执行压缩命令而后咱们能够命令行工具中，执行 gulp script 命令，其中 script 是工作名称。 ...

本节咱们来学习 Gulp 中的 globs 的匹配规定。glob 是由一般字符或通配字符组成的字符串，用于匹配文件门路。咱们能够应用一个或多个 glob 匹配规定在文件系统中定位文件。 gulp.src()办法src() 办法须要一个 glob 字符串或一个 glob 字符串组成的数组来作为参数，确定哪些文件须要被操作。 gulp.src(globs[, options])globs：文件匹配模式，相似于正则表达式，用来匹配文件门路。options：可选参数，通常状况不须要用到。示例：gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格局的文件gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js']) // ! 匹配除了index.js之外的所有js文件gulp.src('./js/**/{omui,common}.js') // {} 匹配{}里的文件名匹配模式gulp 外部应用了 node-glob 模块来实现其文件匹配性能。咱们能够应用上面这些非凡的字符来匹配咱们想要的文件。 单匹配模式： 匹配符形容*匹配文件门路中的 0 个或多个字符，但不会匹配门路分隔符，除非门路分隔符呈现在开端**匹配门路中的 0 个或多个目录及其子目录？匹配方括号中呈现的字符中的任意一个[...]匹配方括号中呈现的字符中的任意一个多匹配模式，同时应用多种匹配： 表达式形容!(pattern\pattern\pattern)匹配任何与括号中给定的任一模式都不匹配的?(pattern\pattern\pattern)匹配括号中给定的任一模式0次或1次+(pattern\pattern\pattern)匹配括号中给定的任一模式至多1次*(pattern\pattern\pattern)匹配括号中给定的任一模式0次或屡次@(pattern\pattern\pattern)匹配括号中给定的任一模式1次数组如果有多种匹配模式时，咱们能够在 src() 办法中应用数组。 应用数组的形式来匹配多种文件，例如上面代码匹配 js、css、html 三种文件：gulp.src(['js/*.js', 'css/*.css', '*.html'])应用数组的形式还有一个益处就是能够很不便的应用排除模式，在数组中的单个匹配模式前加上 ! 符号即是排除模式，，它会在匹配的后果中排除这个匹配，要留神一点的是不能在数组中的第一个元素中应用排除模式gulp.src([*.js,'!b*.js']) // 匹配所有js文件，但排除掉以b结尾的js文件gulp.src(['!b*.js',*.js]) // 不排除任何文件，因为排除模式不能呈现在数组的第一个元素中此外，还能够应用开展模式。开展模式以花括号 {} 作为定界符，依据它外面的内容，会开展为多个模式，最初匹配的后果为所有开展的模式相加起来失去的后果。 开展的例子如下： a{b,c}d： 会开展为 abd，acd。a{b,}c：会开展为 abc，ac。a{0..3}d：会开展为 a0d，a1d，a2d，a3d。a{b,c{d,e}f}g：会开展为 abg，acdfg，acefg。a{b,c}d{e,f}g：会开展为 abdeg，acdeg，abdeg，abdfg。字符串片段与分隔符字符串片段是指两个分隔符之间的所有字符组成的字符串，在 globs 中，分隔符永远是 / 字符，不辨别操作系统，即便是在采纳 \\ 作为分隔符的 Windows 操作系统中也是如此。在 globs 中，\\ 字符被保留作为转义字符应用。 ...

Gulp 裸露了 src() 和 dest() 办法，用于解决计算机上寄存的文件。 其中 src() 办法承受一个 glob 参数，从文件系统中读取文件，而后生成一个 Node 流。它将所有匹配的文件读取到内存中并通过流进行解决。 由 src() 办法产生的流该当从工作中返回并收回异步实现的信号，就如 创立工作文档中所述。 示例：const { src, dest } = require('gulp');exports.default = function() { return src('src/*.js') .pipe(dest('output/'));}流提供的次要的 API 是用于链接转换或者是可写流的 .pipe() 办法。 const { src, dest } = require('gulp');const babel = require('gulp-babel');exports.default = function() { return src('src/*.js') .pipe(babel()) .pipe(dest('output/'));}dest() 承受一个输入目录作为参数，并且它还会产生一个 Node 流，通常作为终止流。当它接管通过管道传递的文件时，它将文件内容和其余细节写入给定目录中。gulp 还提供了 symlink() 办法，它的操作形式与dest() 相似，但会创立链接而不是文件。 大多数状况下，插件将应用.pipe() 办法搁置在 src() 和 dest() 之间，并将转换流中的文件。 向流中增加文件src() 办法能够放在管道的两头，依据给定的 glob 向流中增加文件，新退出的文件只会对后续的转换可用，如果 glob 匹配的文件与之前的有反复，它依然会再次增加文件。 ...

Node 库有多种形式解决异步性能，最常见的模式是 error-first callbacks，除此之外，还有 streams、promise()、event emitters、child processes、observables。gulp 工作规范化了所有这些类型的异步性能。 工作实现告诉当从工作中返回 stream、promise、event emitter、child process 或 observable 时，胜利或谬误值将告诉 gulp 是否继续执行或完结。如果工作出错，gulp 将立刻完结执行并显示该谬误。 当应用 series() 组合多个工作时，任何一个工作的谬误将导致整个工作组合完结，并且不会进一步执行其余工作。当应用 parallel() 组合多个工作时，一个工作的谬误将完结整个工作组合的完结，然而其余并行的工作可能会执行完，也可能没有执行完。 返回 streamconst { src, dest } = require('gulp');function streamTask() { return src('*.js') .pipe(dest('output'));}exports.default = streamTask;返回 promisefunction promiseTask() { return Promise.resolve('the value is ignored');}exports.default = promiseTask;返回 event emiterconst { EventEmitter } = require('events');function eventEmitterTask() { const emitter = new EventEmitter(); // Emit has to happen async otherwise gulp isn't listening yet setTimeout(() => emitter.emit('finish'), 250); return emitter;}exports.default = eventEmitterTask;返回 child processconst { exec } = require('child_process');function childProcessTask() { return exec('date');}exports.default = childProcessTask;返回 observableconst { Observable } = require('rxjs');function observableTask() { return Observable.of(1, 2, 3);}exports.default = observableTask;返回 callback如果工作未返回任何内容，则必须应用 callback 来示意工作已实现，回调将作为以下示例中名为 cb() 的惟一参数传递给工作。 ...

Gulp 中的工作能够是能够分为 public（私有）和 private （公有）类型。 私有工作：从 gulpfile 中被导出的工作称为私有工作，能够通过 gulp 命令间接调用。公有工作：在外部应用，通常作为 series() 或 parallel() 组合的组成部分。一个公有类型的工作在外观和行为上和其余工作是一样的，然而不可能被用户间接调用。如果须要将一个工作注册为私有类型的，只须要从 gulpfile.js 文件中将工作通过 export 导出即可。 如何导出工作咱们能够在 gulpfile.js 文件中，应用 export 命令导出工作，这样这个被导出的工作变为了一个私有工作（public task），能够被 gulp 命令间接调用。 示例：看上面这个例子： const { series } = require('gulp');// clean函数并未被导出，因而clean是公有工作，能够被用在 series() 组合中function clean(cb) { cb();}// build 函数被导出了，因而它是一个私有工作，能够被 gulp 命令间接调用，它也可用在series()组合中function build(cb) { cb();}// 导出 build 函数exports.build = build;exports.default = series(clean, build);执行 gulp --tasks 命令：在以前的 gulp 版本中，task() 办法用来将函数注册为工作。尽管这个 API 仍旧是能够应用的，然而导出将会是次要的注册机制，除非遇到 export 不起作用的状况。 组合工作Gulp 提供了两个弱小的组合办法： series() 和 parallel() 办法，这两个办法容许将多个独立的工作组合为一个更大的操作。这两个办法都能够承受任意数目的工作（task）函数或曾经组合的操作。series() 和 parallel() 办法能够相互嵌套至任意深度。 ...

本节咱们开始学习如何创立 Gulp 工作。每一个 Gulp 工作都是一个异步的 JavaScript 函数，这个函数是一个能够接管回调函数 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable 类型值的函数。 gulp.task()办法gulp.task() 用于创立一个 gulp 工作，语法如下所示： gulp.task(name[, deps], fn)name： 示意工作的名称。deps ：以后定义的工作须要依赖的其余工作，为一个数组。以后定义的工作会在所有依赖的工作执行结束后才开始执行。如果没有依赖，则省略这个参数。fn：为工作函数，咱们把工作要执行的代码都写在外面。是一个可选参数。给工作起一个惟一的名称后，咱们能够通过这个名称来执行工作，例如： > gulp 工作名在执行工作时，如果咱们不加工作名进行执行，也就是只输出 gulp 命令时 ，会执行名为 default 的默认工作，如果没有定义这个工作，将什么也不做。 创立gulpfile文件首先咱们须要在我的项目根目录下创立一个 gulpfile.js 文件。并在文件中引入 gulp： var gulp = require('gulp');用于通知 Node 去 node_modules 中查找 gulp 包，先在部分进行查找，找不到则去全局环境中查找。找到之后就会赋值给 gulp 变量，而后咱们就能够应用它了。 示例：例如创立一个名为 xkd 的工作： let gulp = require('gulp');gulp.task('xkd', done => { console.log("你好，侠课岛！") done()});执行 gulp xkd 命令，下图为运行后果： 运行后果第一行示意找到本地的 gulpfile.js 文件。运行后果第二行示意开始运行工作 xkd，这个 xkd 是咱们给工作定义的名称。运行后果第三行示意运行代码内的逻辑。运行后果第四行示意工作'xkd'运行完结，一共耗时5.27 ms执行多个工作gulp.task() 办法中的第二个参数为一个数组，数组中的值是工作名的汇合，当执行此工作时，会先执行数组中的工作。咱们来看一下例子。 ...

Gulp 介绍与装置Gulp 是前端开发过程中一种对代码进行构建的工具，是自动化我的项目的构建利器。它不仅能对网站资源进行优化，而且在开发过程中很多反复的工作可能应用正确的工具主动实现，应用 Gulp 不仅能够轻松的编写代码，而且还大大的进步了咱们的工作效率。 Gulp 是基于 Node.js 的自动化工作运行器，它能自动化地实现前端代码（例如 HTML、CSS、JavaScript、Less、Sass、image 等文件）的测试、查看、合并、压缩、格式化、浏览器主动刷新、部署文件生成，并监听文件在改变后反复指定的这些步骤。 Gulp特点易于应用，通过代码的优质配置策略，使得 gulp 操作简略工作简单化，简单工作治理化。构建快捷，利用 Node.js 的作用咱们能够更疾速的构建我的项目从而缩小频繁的 IO 操作。简略易学，用起码的 API 更轻松的把握 gulp。插件高质，gulp 严格的插件指南能够确保咱们的工作更加高质无效。如何装置Gulp在装置 Gulp 之前，咱们须要先查看电脑上是否曾经正确装置 node、npm、npx，须要用到的命令如下所示： node --versionnpm --versionnpx --version如下图所示：如果上述工具还没有装置，能够先点击进行装置：https://nodejs.org/en/。 装置Gulp命令行工具装置 Gulp 命令行工具命令如下所示，其中 --global 示意全局装置： npm install --global gulp-cli装置实现后，能够创立我的项目目录并进入创立好的目录： > npx mkdirp my_gulp> cd my_gulp如下图所示： 这样咱们就在 C:\Users\lu\Desktop 目录下创立一个名为 my_gulp 的我的项目。 创立package.json文件如果咱们要在我的项目的根目录下创立一个 package.json 文件，能够执行如下所示命令： > npm init按下回车后，此命令会指引咱们设置我的项目名、版本、形容信息等，如下图所示，如果想要疾速创立 package.json 文件，能够执行 npm init -y 命令。 装置Gulp而后在我的项目根目录下执行如下命令，装置 Gulp，作为开发时依赖项： npm install --save-dev gulp装置实现之后，能够执行如下命令查看是否装置胜利： gulp --version如下图所示：此时我的项目根目录下会创立一个 package-lock.json 文件，并且 gulp 会被增加到 package.json 文件的 devDependencies 选项中。 ...

Gulp基于node平台开发的前端构建工具，将机械化操作编写成工作，想要执行机械化操作只须要输出命令即可，用机器执行手工，进步开发效率### Gulp的作用 我的项目上线 HTML CSS JS文件压缩合并语法转换（es6,less等等）公共文件抽离批改文件浏览器主动刷新Gulp的应用命令行工具：npm install cli -g 应用npm install gulp下载gulp库文件在我的项目根目录下建设gulpfile.js文件重构我的项目的文件夹构造 src目录搁置源代码文件 dist目录搁置构建后文件在gulpfile.js文件中编写工作.在命令行工具中执行gulp工作 Gulp中提供的办法gulp.src()：获取工作要解决的文件gulp.dest()：输入文件gulp.task()：建设gulp工作gulp.watch()：监控文件的变动// 引进gulp模块const gulp = require('gulp');// 建设gulp工作gulp.task('first', () => { //获取要解决的文件 gulp.src('./src/1.hello word.js') // 将解决好的工作输入到dist目录 .pipe(gulp.dest('./dist'))})Gulp插件gulp-htmlmin ：html文件压缩gulp-csso ：压缩cssgulp-babel ：JavaScript语法转化gulp-less: less语法转化gulp-uglify ：压缩混同JavaScriptgulp-file-include 公共文件蕴含browsersync 浏览器实时同步

周末有个小伙伴加我微信，向我请教了一个问题：老哥，过滤器 (Filter) 和 拦截器 (Interceptor) 有啥区别啊？ 听到题目我的第一感觉就是：简单！ 毕竟这两种工具开发中用到的频率都相当高，应用起来也是比较简单的，可当我准备回复他的时候，竟然不知道从哪说起，支支吾吾了半天，场面炒鸡尴尬有木有，工作这么久一个基础问题答成这样，丢了大人了。 平时觉得简单的知识点，但通常都不会太关注细节，一旦被别人问起来，反倒说不出个所以然来。 归根结底，还是对这些知识了解的不够，一直停留在会用的阶段，以至于现在一看就会一说就废！这是典型基础不扎实的表现，哎·~，其实我也就是个虚胖！ 知耻而后勇，下边结合实践，更直观的来感受一下两者到底有什么不同？ 准备环境我们在项目中同时配置 拦截器 和 过滤器。 1、过滤器 (Filter) 过滤器的配置比较简单，直接实现Filter 接口即可，也可以通过@WebFilter注解实现对特定URL拦截，看到Filter 接口中定义了三个方法。 init() ：该方法在容器启动初始化过滤器时被调用，它在 Filter 的整个生命周期只会被调用一次。注意：这个方法必须执行成功，否则过滤器会不起作用。doFilter() ：容器中的每一次请求都会调用该方法， FilterChain 用来调用下一个过滤器 Filter。destroy()： 当容器销毁 过滤器实例时调用该方法，一般在方法中销毁或关闭资源，在过滤器 Filter 的整个生命周期也只会被调用一次@Componentpublic class MyFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { System.out.println("Filter 前置"); } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { System.out.println("Filter 处理中"); filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { System.out.println("Filter 后置"); }}2、拦截器 (Interceptor) ...

本文主要对以下部分进行处理; 构建tsx路径映射eslint检查tsx一、构建tsx1、安装相关依赖，本文选择tsify插件来解析tsx,tsify会根据tsconfig.json配置来解析tsx，传送门：https://www.npmjs.com/package...。 cnpm i -D tsify2、构建脚本 const _script = () => { return browserify({ entries: _path.main_js, debug: isDev, // 生成inline-sourcemap }).plugin(tsify) .transform(babelify, { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: [ '@babel/plugin-transform-runtime', ['@babel/plugin-proposal-decorators', { 'legacy': true }], ['@babel/plugin-proposal-class-properties', { 'loose': true }] ] }) .bundle() .pipe(gulpif(isDev, exorcist(path.resolve(__dirname, 'dist/js/app.js.map')))) // 生成外部map .pipe(source('app.js')) .pipe(buffer()) .pipe(gulpif(isProd, uglify())) .pipe(gulpif(isProd, rename({suffix: '.min'}))) .pipe(gulp.dest('./dist/js')) .pipe(gulpif(isDev, connect.reload()));};3、tsconfig.json配置 { "compilerOptions": { "target": "es5", "module": "commonjs", "jsx": "react", "strict": true, "noImplicitAny": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }}二、路径映射路径映射需要配置两个地方，构建脚本和tsconfig.json，因为执行构建脚本时他并不知道tsconfig.json当中的路径配置，所以两个地方都需要统一配置。1、tsconfig.json加上路径映射 ...

背景在项目工程化中，通常根据不同的环境对项目进行构建，一般环境主要有开发、测试、预生产、生产。开发环境下关注规范、测试，而其他环境主要关注性能、安全，比如开发环境下进行eslint检查，而其他环境不做eslint检查。 项目相关依赖 cnpm i -D cross-env gulp-if gulp-eslint babel-eslint gulp-sourcemaps exorcistexorcist用于在外部生成map文件目录结构 gulp├── src│ ├── components│ │ ├── Test│ │ | └── index.jsx│ │ ├── Child│ │ | ├── index.css│ │ | └── index.jsx│ │ ├── Count│ │ | ├── index.css│ │ | └── index.jsx│ └── App.jsx ├── node_modules├── .eslintignore├── .eslintrc.js├── index.js├── gulpfile.js├── index.html└── package.jsonpackage.json执行脚本 "scripts": { "dev": "cross-env NODE_ENV=dev gulp dev", "build": "cross-env NODE_ENV=prod gulp build" },脚本 ...

相关依赖 // 根据文件生成hash值附加到html和css文件中的资源引用。cnpm i -D gulp-res-version项目结构 gulp├── src│ ├── components│ │ ├── Test│ │ | └── index.jsx│ │ ├── Child│ │ | ├── index.css│ │ | └── index.jsx│ │ ├── Count│ │ | ├── index.css│ │ | └── index.jsx│ └── App.jsx ├── node_modules├── index.js├── gulpfile.js├── index.html└── package.json脚本 // index.jsimport './src/App.jsx'// src/App.jsximport React from 'react'import { render } from 'react-dom'import Test from './components/Test/index.jsx'render(<Test />, document.getElementById("app"))// src\components\Test\index.jsximport React from 'react'import Child from '../Child/index.jsx'import Count from '../Count/index.jsx'export default class Test extends React.Component { state = { msg: 'hello, world' } render() { const { msg } = this.state return ( <React.Fragment> <Child msg={msg}/> <Count /> </React.Fragment> ) }}// src\components\Count\index.jsximport React from 'react'export default class Count extends React.Component { state = { count: 0, msg: '显示一个计数器' } subFn = () => { this.setState((prevState, props) => ({ count: prevState.count - 1 })) } plusFn = () => { this.setState((prevState, props) => ({ count: prevState.count + 1 })) } render() { const { count, msg } = this.state return ( <div> <p className="count-text">{msg}</p> <div> <button onClick={this.subFn}>-</button> <span>{count}</span> <button onClick={this.plusFn}>+</button> </div> </div> ) }}// src\components\Count\index.css.count-text { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; color: red;}// src\components\Test\index.jsximport React from 'react'const Child = (props) => <div className="color">{props.msg}</div>export default Child// src\components\Test\index.css.color { color: red;}构建脚本 ...

相关依赖包 cnpm i -D gulp-uglify gulp-cssmin gulp-minify-html gulp-rename项目结构 gulp├── src│ ├── components│ │ ├── Test│ │ | └── index.jsx│ │ ├── Child│ │ | ├── index.css│ │ | └── index.jsx│ │ ├── Count│ │ | ├── index.css│ │ | └── index.jsx│ └── App.jsx ├── node_modules├── index.js├── gulpfile.js├── index.html└── package.json脚本 // index.jsimport './src/App.jsx'// src/App.jsximport React from 'react'import { render } from 'react-dom'import Test from './components/Test/index.jsx'render(<Test />, document.getElementById("app"))// src\components\Test\index.jsximport React from 'react'import Child from '../Child/index.jsx'import Count from '../Count/index.jsx'export default class Test extends React.Component { state = { msg: 'hello, world' } render() { const { msg } = this.state return ( <React.Fragment> <Child msg={msg}/> <Count /> </React.Fragment> ) }}// src\components\Count\index.jsximport React from 'react'export default class Count extends React.Component { state = { count: 0, msg: '显示一个计数器' } subFn = () => { this.setState((prevState, props) => ({ count: prevState.count - 1 })) } plusFn = () => { this.setState((prevState, props) => ({ count: prevState.count + 1 })) } render() { const { count, msg } = this.state return ( <div> <p className="count-text">{msg}</p> <div> <button onClick={this.subFn}>-</button> <span>{count}</span> <button onClick={this.plusFn}>+</button> </div> </div> ) }}// src\components\Count\index.css.count-text { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; color: red;}// src\components\Test\index.jsximport React from 'react'const Child = (props) => <div className="color">{props.msg}</div>export default Child// src\components\Test\index.css.color { color: red;}构建脚本 ...

项目结构 gulp├── src│ ├── components│ │ ├── Test│ │ | └── index.jsx│ │ ├── Child│ │ | ├── index.css│ │ | └── index.jsx│ └── App.jsx ├── node_modules├── index.js├── gulpfile.js├── index.html└── package.json依赖脚本 // index.jsimport './src/App.jsx'// App.jsximport React from 'react'import { render } from 'react-dom'import Test from './components/Test/index.jsx'render(<Test />, document.getElementById("app"))// Testimport React from 'react'import Child from '../Child/index.jsx'export default class Test extends React.Component { state = { msg: 'hello, world' } render() { const { msg } = this.state return <Child msg={msg}/> }}// Childimport React from 'react'const Child = (props) => <div className="color">{props.msg}</div>export default Childscss ...

项目结构 gulp01├── src│ ├── components│ │ ├── Test│ │ | └── index.jsx│ │ ├── Child│ │ | ├── index.css│ │ | └── index.jsx│ └── App.jsx├── node_modules├── index.js├── gulpfile.js├── index.html└── package.json项目依赖 脚本 // index.jsimport './src/App.jsx'// App.jsximport React from 'react'import { render } from 'react-dom'import Test from './components/Test/index.jsx'render(<Test />, document.getElementById("app"))// Testimport React from 'react'import Child from '../Child/index.jsx'export default class Test extends React.Component { state = { msg: 'hello, world' } render() { const { msg } = this.state return <Child msg={msg}/> }}// Childimport React from 'react'const Child = (props) => <div className="color">{props.msg}</div>export default Childcss ...

项目结构 gulp01├── src│ ├── components│ │ ├── Test│ │ | └── index.jsx│ │ ├── Child│ │ | ├── index.scss│ │ | └── index.jsx│ └── App.jsx├── node_modules├── index.js├── gulpfile.js├── index.html└── package.json项目依赖脚本 // index.jsimport './src/App.jsx'// App.jsximport React from 'react'import { render } from 'react-dom'import Test from './components/Test/index.jsx'render(<Test />, document.getElementById("app"))// Testimport React from 'react'import Child from '../Child/index.jsx'export default class Test extends React.Component { state = { msg: 'hello, world' } render() { const { msg } = this.state return <Child msg={msg}/> }}// Childimport React from 'react'const Child = (props) => <div className="color">{props.msg}</div>export default Childscss ...