gulp构建项目（四）：run-sequence实现逐个执行任务

一、gulp.task()说明

1、gulp任务是异步运行的，默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。

2、我们的任务需要依次逐个执行，前面的文章有提到过这种需求，比如：刷新浏览器，包括后续要讲到的的生成版本号的任务都需要在其他任务执行完毕之后，再执行。

3、解决：引入run-sequence模块。

二、安装run-sequence

npm i -D run-sequence

三、run-sequence参数说明

/**
*   @param task     可接多个任务，也可以是数组，将依次执行task1、task2，如果task2里面包含多个任务，则这些任务将一起被执行
*   @param callback 回调
*/

runSequence(task1, [task2, callback])

四、run-sequence使用

var runSequence = require('run-sequence');  // 按顺序执行task

gulp.task('default', function(cb) {
    runSequence(
        ['clean'],  // 首先清理文件，否则会把新打包的文件清掉
        ['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行，提高效率
        ['browser', 'watch'], // 所有文件打包完毕之后启动服务打开浏览器
        cb);
});

注意：监听任务使用runSequence时不要带cb参数

gulp.task('watch', function () {
    w('./src/**/*.html', 'html');
    w('./src/js/**', 'js_main');
    w('./src/libs/**/*.js', 'js_libs');
    w('./src/css/**', 'css_main');
    w('./src/images/**', 'images');

    function w(path, task){
        watch(path, function () {
            /**
          	* 打包完成后，再刷新浏览器
          	* 监听任务不要带cb参数，否则会报错：回调次数太多
          	*/
            runSequence(task, 'browser_reload');
        });
    }
});

五、执行gulp命令，效果如下

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题