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