Gulp.js 按特定顺序运行任务答案

【问题标题】：Gulp.js run tasks in specific order blockingGulp.js 按特定顺序运行任务
【发布时间】：2014-07-09 18:58:29
【问题描述】：

使用 gulp.js 我有三个任务（uglify、buildHTML、rmRevManifest）我想作为父构建任务的一部分运行。我的代码可以工作，除了它并行运行任务（即不保留顺序）。如何让任务阻塞而不运行下一个直到前一个完成？

I.E.现在执行顺序返回为：

[11:50:17] gulp-notify: [Gulp notification] Deleted 'rev-manifest.json'.
[11:50:17] gulp-notify: [Gulp notification] Created 'build/index.html'.
[11:50:17] gulp-notify: [Gulp notification] Uglified JavaScript.

顺序很重要，uglify 应该首先运行，然后是 buildHTML，最后是 rmRevManifest。

gulp.task('build', ['uglify', 'buildHTML', 'rmRevManifest'], function(cb) {
});

gulp.task('uglify', function(cb) {
    gulp.src('client/js/source/**/*.js')
        .pipe(concat('app'))
        .pipe(ngmin())
        .pipe(uglify())
        .pipe(rev())
        .pipe(rename({
            extname: ".min.js"
        }))
        .pipe(gulp.dest('client/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('client/js'))
        .pipe(notify('Uglified JavaScript.'));
});

gulp.task('buildHTML', function(cb) {
    gulp.src('client/views/index.html')
        .pipe(replace(/app\-[a-fA-F0-9]\.min\.js/, 'app-.min.js'))
        .pipe(gulp.dest('client/build'))
        .pipe(notify('Created \'build/index.html\'.'));
});

gulp.task('rmRevManifest', function(cb) {
    gulp.src('client/js/rev-manifest.json', { read: false })
        .pipe(rimraf())
        .pipe(notify('Deleted \'rev-manifest.json\'.'));
});

【问题讨论】：

标签： javascript gulp

【解决方案1】：

在 Gulp 3.0 中设置依赖项的示例。在此示例中，3 个任务取决于应首先执行的“干净”任务：

// Include Gulp
var gulp = require('gulp');
var task = {};

// Clean up
gulp.task('clean', function () { .. });

// HTML pages
gulp.task('pages', task.pages = function () { ... });
gulp.task('pages:clean', ['clean'], task.pages);

// CSS style sheets
gulp.task('styles', task.styles = function () { ... });
gulp.task('styles:clean', ['clean'], task.styles);

// JavaScript files
gulp.task('scripts', task.scripts = function () { ... });
gulp.task('scripts:clean', ['clean'], task.scripts);

// Bundling and optimization
gulp.task('build', ['pages:clean', 'styles:clean', 'scripts:clean']);

使用 run-sequence 将等于：

// Include Gulp & utilities
var gulp = require('gulp');
var runSequence = require('run-sequence');

// Clean up
gulp.task('clean', function () { .. });

// HTML pages
gulp.task('pages', function () { ... });

// CSS style sheets
gulp.task('styles', function () { ... });

// JavaScript files
gulp.task('scripts', function () { ... });

// Bundling and optimization
gulp.task('build', ['clean'], function (cb) {
    runSequence(['pages', 'styles', 'scripts'], cb);
});

P.S.：在即将到来的 Gulp 4.0 中，依赖系统会更好。

【讨论】：

【解决方案2】：

真正的答案：您需要设置需要首先运行其他任务的依赖项。

简单的答案：有一个 npm 模块可以完全满足您的需求，称为 run sequence。

【讨论】：

这有点有限。例如，如果您有一个脚本任务来构建您的脚本，并且在某些情况下您想先执行一个干净的任务。在 gulp 中，您必须使“干净”成为脚本的依赖项。这具有清洁成为强制性的效果。

【解决方案3】：

var runSequence = require('run-sequence');

gulp.task('build', function(cb) {
     runSequence('uglify',
                 'buildHTML',
                 'rmRevManifest',
                 cb);
});

    gulp.task('uglify', function() {
        return gulp.src('client/js/source/**/*.js')
               .pipe(concat('app'))
               .pipe(ngmin())
               .pipe(uglify())
               .pipe(rev())
               .pipe(rename({
                    extname: ".min.js"
                }))
               .pipe(gulp.dest('client/js'))
               .pipe(rev.manifest())
               .pipe(gulp.dest('client/js'));
    });

    gulp.task('buildHTML', function() {
        var revManifest = require('./client/js/rev-manifest.json');

        return gulp.src('client/views/index.html')
               .pipe(replace(/app\-[a-fA-F0-9]\.min\.js/, 'app-' + revManifest.app + '.min.js'))
               .pipe(gulp.dest('client/build'));
    });

    gulp.task('rmRevManifest', function() {
        return gulp.src('client/js/rev-manifest.json', { read: false })
               .pipe(rimraf());
    });

【讨论】：