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能够支持同步任务。