gulp顺序执行任务
gulp的任务的执行是异步的。
所以,当我写完一系列的任务,准备一股脑地执行。
#
gulp.task('prod', ['clean', 'compass', 'image', 'style', 'html', 'ftp']);
[10:22:54] Starting 'clean'...
[10:22:54] Starting 'compass'...
[10:22:54] Starting 'imagemin'...
[10:22:54] Starting 'style'...
[10:22:54] Starting 'html'...
[10:22:54] Starting 'ftp'...
[10:22:54] Finished 'style' after 88 ms
[10:22:54] Finished 'html' after 86 ms
[10:22:54] Finished 'clean' after 255 ms
[10:22:54] Finished 'ftp' after 549 ms
[10:22:55] Finished 'compass' after 1.5 s
[10:22:56] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%)
[10:22:56] Finished 'imagemin' after 2.46 s
[10:22:56] Starting 'prod'...
[10:22:56] Finished 'prod' after 14 μs
这不是我想要的/(ㄒoㄒ)/~~。任务完全错乱了。ftp上并没有看到我要的文件,因为其他任务还没执行完ftp任务就已经执行了。
我想要的是:('clean', 'compass', [image', 'style', 'html'],'ftp'),圆括号里面串行,中括号里面并行。可以给每个任务写依赖,但是好麻烦,而且有时候多个依赖,依赖与依赖之间依赖。算了。用插件。
var runSequence = require('gulp-run-sequence');
gulp.task('prod', function(cb) {
runSequence('clean', 'compass', ['image', 'style', 'html'], 'ftp', cb);
});
[15:20:32] Starting 'prod'...
[15:20:32] Starting 'clean'...
[15:20:32] Finished 'clean' after 23 ms
[15:20:32] Starting 'compass'...
[15:20:33] Finished 'compass' after 1.21 s
[15:20:33] Starting 'image'...
[15:20:33] Starting 'style'...
[15:20:33] Starting 'html'...
[15:20:33] Finished 'style' after 49 ms
[15:20:33] Finished 'html' after 55 ms
[15:20:36] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%)
[15:20:36] Finished 'image' after 2.26 s
[15:20:36] Starting 'ftp'...
[15:20:36] Finished 'ftp' after 82 ms
[15:20:36] Finished 'prod' after 3.58 s
【2015/7/13 update: gulp-run-sequrence插件https://www.npmjs.com/package/gulp-run-sequence 已弃用了,可以用gulp-sequence代替https://github.com/teambition/gulp-sequence 】
解决。
也可以用gulp 4.0, 虽然还没正式发布,但是试用了一下,超好。
首先我们要卸了之前装的3.x先,然后重装4.0
# 卸载全局的 gulp
$ npm uninstall gulp -g
# 安装全局的 gulp 4.0
$ npm install "gulpjs/gulp-cli#4.0" -g
$ npm install "gulpjs/gulp#4.0" -g
# 到项目目录里删掉本地的 gulp
$ npm rm gulp --save-dev
# 安装本地的 gulp 4.0
$ npm install "gulpjs/gulp#4.0" --save-dev
然后。就可以这样写我们的任务了
#
gulp.task('prod', gulp.series('clean', 'compass', gulp.parallel('image', 'style', 'html'), 'ftp'));
series里的任务是顺序执行的,parallel里的任务是同时执行的。
执行gulp prod
看一下效果
[15:36:53] Starting 'prod'...
[15:36:53] Starting 'clean'...
[15:36:54] Finished 'clean' after 24 ms
[15:36:54] Starting 'compass'...
[15:36:55] Finished 'compass' after 1.28 s
[15:36:55] Starting 'parallel'...
[15:36:55] Starting 'image'...
[15:36:55] Starting 'style'...
[15:36:55] Starting 'html'...
[15:36:55] Finished 'style' after 67 ms
[15:36:55] Finished 'html' after 67 ms
[15:36:57] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%)
[15:36:57] Finished 'image' after 2.25 s
[15:36:57] Finished 'parallel' after 2.25 s
[15:36:57] Starting 'ftp'...
[15:36:57] Finished 'ftp' after 63 ms
[15:36:57] Finished 'prod' after 3.62 s