gulp小结

• gulp是什么？
• 为什么要使用它？
• 和grunt、webpack的区别
• 为什么要用4.0？
• npm包管理
• 怎么安装
• 几个API
  • gulp.src(globs[, options])
  • gulp.dest(path[, options])
  • gulp.watch(glob[, opts])
• 基本插件
• 明星插件

gulp是什么？

一个自动化构建工具，基于nodejs的自动任务运行器。

为什么要使用它？

易于使用，易于学习。它能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

和grunt、webpack的区别

gulp和grunt非常类似，但相比于grunt的频繁IO操作，gulp的流操作，能更快地更便捷地完成构建工作。前两者定位是工具，webpack则是种模块化解决方案。

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。

gulp也能调用webpack。

为什么要用4.0？

• 组合任务。

  比如以前的gulp对多个异步任务很难控制，必须借助于第三方模块，如run-sequence、event-stream等，效果也并不理想。

  现在gulp带来了两个新的api：gulp.series【顺序】和gulp.parallel【并行】，这两个革命性的api将帮助开发者解决恼人的任务流程控制问题。

//clear任务执行完后，才会执行copy
gulp.task("build",
  gulp.series("clear","copy")
 );

//inject:home和inject:list这2个任务同时执行
 gulp.task("inject-all",
  gulp.parallel("inject:home",
    "inject:list"
  )
 );

小技巧：一个任务中需要立即执行一下任务，以前版本有gulp run XX，新的没有，但可以这样：

gulp.parallel('XX')();
gulp.series('XX')();

• 支持异步任务

  有3种方式确认gulp能够识别任务何时完成。后2者重要是return

• 回调

• 返回一个流

• 返回一个Promise

  更多参见这篇文章：http://codecloud.net/10666.html (opens new window)

npm包管理

包管理主要在根目录下的 package.json文件。 scripts中是一些npm的任务，npm run dev 即可执行。

dependencies是项目中必须的包，目前我们没有用到，只有个vue。 devDependencies是开发所用的包，发布到生产环境不需要的都放在这里，平时安装时需要用npm install -save-dev XX，可简写作npm i -D XX。

同时安装多个包可以这样：npm install -save-dev aa bb。或者将包复制到package文件里，直接在根目录命令行里npm i或npm install。

包的版本：如"vue": "^2.0.1"

一个完整的版本号组表示为： [主要版本号，次要版本号，补丁版本号]

• ~会匹配最新的子版本（中间那个数字），比如~1.2.3会匹配所有的1.2.x版本，但不匹配到1.3.0及以上
• ^会匹配最新的主版本（第一个数字），比如^1.2.3将会匹配所有的1.x.x版本，2.0.0就缓缓飘过了。

怎么安装

1. 全局：npm i gulp -g
2. 工程内部：npm i -D gulp
3. 工程根目录下创建gulpfile.js，它是配置文件。一个任务类似gulp.task('a',function(){});
4. 在webstorm中右键gulpfile.js 选择Show Gulp Tasks打开Gulp窗口，双击任务a即可。 或者在命令行中，输入gulp a

几个API

gulp.src(globs[, options])

输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个流，它可以被 pipe 到别的插件中。

gulp.src('client/templates/*.jade')
   .pipe(jade())
   .pipe(minify())
   .pipe(gulp.dest('build/minified_templates'));

globs

globs可以是字符串，也可以是数组，相对路径或绝对路径都可以。举个例子：

["src/**/*.html", "!src/*.html", "src/play.html"]

表示目标是src下所有的html文件，但不包括根目录的html文件，却要包含根目录下play.html。

options

通过 glob-stream 所传递给 node-glob的参数，可传可不传。

• options.buffer 类型： Boolean 默认值： true

如果该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer的形式。这在处理一些大文件的时候将会很有用。

• options.read 类型：Boolean 默认值： true

如果该项被设置为false，那么file.contents会返回空值（null），也就是并不会去读取文件。只获取文件路径，不需要读取内容时有用。

• options.base

举个例子感受一下，比如一个路径为client/js/somedir 的目录中，有一个文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建。

path 类型： `String` or `Function`

文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径

options 类型： `Object`

• options.cwd 类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

• options.mode 类型： String 默认值： 0777

八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

gulp.watch(glob[, opts])

旧版本有个参数回调，比如：

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

将变为：

var watcher = gulp.watch('js/**/*.js' /* 你也可以在这儿传入一些选项与/或一个任务函数 */);
watcher.on('all', function(event, path, stats) {
  console.log('File ' + path + ' was ' + event + ', running tasks...');
});

或监听单独的事件类型，基本的3种：增、删、改

watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed, running tasks...');
});

watcher.on('add', function(path) {
  console.log('File ' + path + ' was added, running tasks...');
});

watcher.on('unlink', function(path) {
  console.log('File ' + path + ' was removed, running tasks...');
});

基本插件

• 引用文件夹：require-dir
• 压缩js：gulp-uglify

有细节可以配置

uglify({
   compress: {
     drop_console:true, //删除console，默认false
     drop_debugger: false//忽略debugger，默认true
   }
});

es6

如果要压缩es6，可以使用gulp-terser

• 合并js：gulp-concat
• 压缩图片：gulp-imagemin
• 压缩html：gulp-htmlmin
• 压缩css：gulp-clean-css
• 压缩成zip包：gulp-zip

明星插件

• 简化书写gulp插件：gulp-load-plugins

var $ = require('gulp-load-plugins')();
gulp.src('from')
    .pipe($.if(condition,$.uglify())//去除前面的'gulp-'
    .pipe($.cleanCss())//原来名字叫gulp-clean-css，以驼峰形式使用
    .pipe(gulp.dest('dist'));

• 重命名：gulp-rename

gulp.src('from').pipe(uglify())
  .pipe(rename('XX'))
  .pipe(gulp.dest('dist'));

• 条件：gulp-if

返回为true,调用后面的方法，其它不用。适用于既不愿意压缩或其它，但又必要将文件复制到指定目录的情况。

	gulp.src('from')
		.pipe(if(function(file){
			if (file.path.endsWith('.min.js')) {
		      return false;
		    }
		    return true;
		},uglify()))
	.pipe(gulp.dest('dist'));

• 缓存：gulp-cache

非常有用，会将方法执行的结果缓存起来，当文件改变后，会重新执行方法，其它文件依然直接从缓存中读取结果。整个工程压缩完js需要2分钟以上，使用缓存后只需要1秒钟。js、css、图片这些大件耗时的都要用到。

注意：方法配置修改以后，缓存就没用了，需要手动删除缓存文件夹

gulp.src('from')
    .pipe($.cache($.uglify(), {
      fileCache: new Cache({
        "cacheDirName": "test",//缓存文件夹名称，默认为gulp-cache
        "tmpDir": "D:\\Documents\\gulp-cache"//指定一个本地的缓存目录，默认为C:\Users\Administrator\AppData\Local\Temp，建议换个目录，因为一般会当作垃圾清除掉
      }),
      name: 'js'//缓存文件夹名称再下一级的子目录，本例类似：D:\\Documents\\gulp-cache\\test\\js
    }))
    .pipe(gulp.dest('dist'));

• 系统提醒：gulp-notify

gulp.src('from')
    .pipe($.zip('map.zip'))
    .pipe(gulp.dest('dist'))
    .pipe($.notify({message: 'map压缩完成'}));

• 文件注入：gulp-inject

gulp.src('from', {cwd: "./src/entry/"})
    .pipe($.inject(gulp.src(['XX'], {read: false, cwd: 'XXdir'}), {
      relative: true,
      starttag: "<!-- start:pluginsJs -->",
      endtag: "<!-- end:pluginsJs -->",
      transform: function(filePath, index){
    return '<script src="' + filePath.substr(index) + '">' + '<' + '/script>';
    }
    }))

• 回调地狱终结者：q

  q就是一个Promise库，提供额外的接口可以封装普通函数为Promise。 详见：http://blog.csdn.net/ii1245712564/article/details/51419533 (opens new window)

当然，现在完全可以使用async/await代替。