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 可以参考学习。开始爽起来吧！