Gulp构建流程的缺陷

接触Gulp几个月了，对这款构建工具也愈来愈熟悉。因而逐渐发现了它的一些问题。

场景

设想如下常见场景，有以下三个task：

• build：用于编译Sass

• compress：用于压缩CSS

• release：执行build和compress，编译Sass并压缩CSS

这个场景十分常见，在开发环境下经过build生成用户CSS进行调试，而在生产环境下则须要执行release。

问题

众所周知gulp.run接口已经弃用，官方API只剩下gulp.src，gulp.dest，gulp.task，gulp.watch四个。task的启动只能经过命令行或者gulp.watch触发。

幸运的是，尝试一下就会发现gulp.start也是能够用于启动task的。那么如上场景中的release应该写成：

gulp.task('release', function() {
    gulp.start(['build', 'compress']);
}

可是这样写明显是有问题的。因为gulp.start并不是顺次同步启动列表中的task，设想当build耗时较长时，实际执行顺序可能将会是：

Starting 'release'...
Starting 'build'...
Starting 'compress'...
Finishing 'build'...
Finishing 'compress'...
Finishing 'release'...

这样形成的问题是，compress读取的CSS文件并不是最新编译生成的版本，所以压缩所得的min.css文件并非咱们想要的。

要解决这个问题，就必需要build完成后才启动compress，所以有以下写法：

gulp.task('release', ['build'], function() {
    gulp.start(['compress']);
}

这样确实可以避免上述的问题，可是很明显语义上并不符合逻辑：

Starting 'build'...
Finishing 'build'...
Starting 'release'...
Starting 'compress'...
Finishing 'compress'...
Finishing 'release'...

咱们想要的难道不该该是这样吗：

Starting 'release'...
Starting 'build'...
Finishing 'build'...
Starting 'compress'...
Finishing 'compress'...
Finishing 'release'...

为了实现这个顺序，只有一种写法：

gulp.task('compress', ['build'], function () {
    // compress
});
gulp.task('release', function () {
    gulp.start(['compress']);
});

这样看起来就更奇怪了…compress毫不应是依赖于build的，而release也毫不应是start compress。

而就Gulp目前的语法来看，并无什么好的解决办法。

总结

总的来讲，Gulp目前的语法并不能很好的支持语义化的构建流程。我所但愿的最好的解决方法是gulp.start可以支持同步任务。