Gulp 4.0 前瞻

Gulp 4.0 发布在即，新首页已经上线，新版将会对任务系统作较大修改，（通过社区讨论——其实没什么讨论啦你们异口同声纷纷同意。这是有多少不爽才会这样齐刷刷……）再也不兼容 3.x 及以前版本的任务系统。

是否是摩拳擦掌跃跃欲试了？新 Gulp 玩起来~

新年新气象

先来看看新版有什么不一样（CHANGELOG.md）：

• 新的任务系统（基于 bach，替换掉了原先基于 orchestrator 的任务系统）
  
  
  • 移除 gulp.reset
  • gulp.task 再也不支持三个参数的用法
  • gulp.task 用字符串注册的任务必须是直接在命令行中调用的任务
  • gulp.task 能够接受单参数语法，这个参数必须是一个命名函数，函数名会被做为任务名
  • 添加了 gulp.series 和 gulp.parallel 方法用于组合任务
  • 添加了 gulp.tree 方法用于获取任务树，传入 { deep: true } 参数能够获得一个 archy 兼容的节点列表
  • 添加了 gulp.registry 方法以定制注册表。
• 添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不过是以软连接的方式
• gulp.dest 和 gulp.symlink 方法添加了 dirMode 参数容许对目标目录更好地控制
• gulp.src 接收的文件匹配字符串会顺序解释，因此你能够写成这样 gulp.src(['*.js', '!b*.js', 'bad.js'])（排除全部以 b 开头的 JS 文件可是除了 bad.js）
• gulp.src 方法添加了 since 选项，筛选在特定时间点以后修改过的文件（用于增量编译）
• 将命令行分离出来成为一个独立模块，以便节约带宽/空间。用 npm install gulp -g 或 npm install gulp-cli -g 均可以安装命令行，只是 gulp-cli 不包含模块代码因此比较小
• 命令行添加了 --tasks-json 参数，能够导出整个任务树以供他用
• 命令行添加了 --verify 参数用以检查 package.json 中是否包含黑名单插件（违背准则而被禁入官方插件列表的可怜娃们）。

新的 gulp.task

从 3.x 升级到 4.x 主要作的就是修改任务定义，之前的任务是这么写的：

javascriptgulp.task('build', function(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['build']);

这里 build 任务的写法在 Gulp 4.0 下仍是OK的，default 就不行了，要改为这样：

javascriptgulp.task('default', gulp.parallel('build'));

好像多了13个字符……莫急。若是想要作个 clean-build 呢？之前要这样：

javascriptgulp.task('clean', function(){
  del('dist');
});

gulp.task('build', function(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('clean-build', ['clean'], function(){
  gulp.start('build');
});

gulp.task('default', ['build']);

按新的写法，clean 和 build 仍是照旧，clean-build 和 default 略有不一样：

javascriptgulp.task('clean', function(){
  del('dist');
});

gulp.task('build', function(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('clean-build', gulp.series('clean', 'build'));
gulp.task('default', gulp.parallel('build'))

这其中 clean 和 build 任务能够写成独立的函数：

javascriptfunction clean(){
  del('dist');
}

function build(){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
}

gulp.task(clean);
gulp.task(build); // 也能够取个更酷的名字 gulp.task('super-fast-building', build);
gulp.task('clean-build', gulp.series(clean, build));
gulp.task('default', gulp.parallel(build)); // 只有一个任务的时候 `parallel` 和 `series` 都行

是否是感受漂亮多了？任务的操做内容和相互间的依赖顺序都更加清晰。

不过……你只要不是特别粗糙，都会发现如今执行任务只有开始没有结束了：

bash$ gulp
[22:07:25] Using gulpfile ~/project/gulpfile.js
[22:07:25] Starting 'default'...
[22:07:25] Starting 'clean'...
[22:07:25] Starting 'build'...

$ # What are you waiting for?

由于咱们还没写完:P，如今更赞的来了。任务函数能够接受一个 callback 做为参数，只有当你调用了这个 callback，这个任务才算结束：

javascriptfunction clean(callback){
  del('dist', callback);
}

function build(callback){
  gulp.src(['*.js'])
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
    .on('finish', callback);
}

gulp.task(clean);
gulp.task(build);
gulp.task('clean-build', gulp.series(clean, build));
gulp.task('default', gulp.parallel(build));

今后你不再会看到 default 任务先完成，而后才执行一大串 clean、build、...，而后再等个三分钟，图片目录的压缩才结束的穿帮剧情了。最奇葩的是，Gulp 还说每一个任务执行时间都不到10毫秒……谁信！

到了 4.0，这事情终于完美了：

bash$ gulp
[22:07:25] Using gulpfile ~/project/gulpfile.js
[22:07:25] Starting 'default'...
[22:07:25] Starting 'clean'...
[22:07:25] Finished 'clean' after 33 ms
[22:07:25] Starting 'build'...
[22:07:25] Finished 'build' after 437 ms
[22:07:25] Finished 'default' after 471 ms

试用 Gulp 4.0

虽然它尚未正式发布，可是阻挡不了咱们尝鲜的脚步。只要如此这般：

bash# 若是安装过全局的 gulp 的话先卸载之
$ npm uninstall gulp -g

# 安装全局的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" -g

# 到项目目录里删掉本地的 gulp
$ npm rm gulp --save-dev

# 安装本地的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" --save-dev

做为起步，这儿有一个 4.0 的 gulpfile.js 能够参考学习。开始爽起来吧！