Gulp watch - 按顺序执行任务（同步）

Question

我有一系列任务要从观察者运行，但我可以让它们按顺序触发：

这里是 gulp 任务和观察者。

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);

所以当我更新一个 scss 文件时，它应该编译它们创建一个单一的 css 文件。然后构建任务将文件与供应商文件连接起来。但是每次我保存文件时，它总是落后一步。以视频为例：http://screencast.com/t/065gfTrY

我已经重命名了任务，更改了监视回调中的顺序等。

我犯了明显的错误吗？

Answer 1

在 GULP 3 中，我使用 run-sequence 包来帮助按顺序而不是并行运行任务。这就是我配置watch 任务的方式，例如：

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

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

上面的例子展示了一个典型的watch 任务，它将gulp.watch 方法与更改时要监听的文件挂钩，并在检测到更改时运行回调函数。然后调用runSequence 函数（在某个watch 的回调中），其中包含要以同步方式运行的任务列表，这与并行运行任务的默认方式不同。

Answer 2

Gulp 会在“同一”时间启动所有任务，除非您声明依赖项（或使流通过管道连接到另一个）。

例如，如果您希望任务 app_build_css 等待任务 app_scss 和 app_vendor_css 完成，请声明依赖项，

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_build_css', 'watch']);

查看Gulp.task() docs

Answer 3

Gulp v4

现在 Gulp v4 已经推出近一年多（于 2017 年底发布），它提供了一些使用名为 bach 的库对任务进行排序的好方法。

https://github.com/gulpjs/bach

注意：我建议迁移到 Gulp v4，因为 v3 存在一些安全漏洞[我不确定现在是否已修补这些漏洞]。

快速示例

Gulp v4 引入了gulp.series 和gulp.parallel，这允许您创建任务并选择串行、并行或混合运行，如下所示。

解释：这将并行运行scss和js任务，一旦完成，它将运行watch任务，因为它们'在系列中。

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}

扩展示例

这是我的 gulp 文件可能看起来的简化示例。

const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');

const paths = {
  scss: [
    'public/stylesheets/*.scss'
  ],
  js: [
    'public/js/*.js'
  ]
};

const scss = () => {
  return gulp.src(paths.scss)
    .pipe(gulpScss)
    .pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';

const js = () => {
  return gulp.src(paths.js)
    .pipe(gulpBabel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';

const watch = () => {
  gulp.watch(paths.scss, scss);
  gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}