javascript - Gulp 有 2 个相互冲突的任务

Question

我有 javascript 和 css 文件，我正在使用 gulp-rev lib[1] 的 fork 存储库，它们都重命名文件并更新 html 文件中的文件引用。

不幸的是，这两个任务之间存在竞争条件，导致样式表引用 md5 命名文件或 js 文件胜出。

我尝试使用 promises 和回调(见下文)来同步任务，但从来没有同时引用 css 和 js md5。

sindresorhus 的 lib 只重命名文件而不修复链接，所以有没有更好的方法来修复 html 链接，或者正在使用他们的 fork 插件(有一些我遗漏的修复)？

gulp.task('rev', ['rev-js'] );
gulp.task('rev-js', ['rev-css'], function(cb) {
  var context = rev.Context();
  gulp.src(['./build/public/js/woddy.js', './build/public/js/angular.js', './build/public/js/components.js'])
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/js'));
  gulp.src('./build/public/app.html')
    .pipe(context.replace(/src="js\/(\w+\.js)"/g, 'src="js/{{$1}}"'))
    .pipe(gulp.dest('./build/public'));
});
gulp.task('rev-css', function() {
  var context = rev.Context();
  gulp.src('./build/public/styles/woddy.css')
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/styles'));
  gulp.src('./build/public/app.html')
    .pipe(context.replace(/href="styles\/(\w+\.css)"/g, 'href="styles/{{$1}}"'))
    .pipe(gulp.dest('./build/public'));
});

1. https://github.com/dtinth/gulp-rev

Answer 1

几乎 gulp 中的所有操作都是异步的，这意味着您需要使用 3 supported methods for notifying when a task is complete 之一. (如果任务是真正同步的，则您无需执行任何操作。)

1. 从一个方法返回一个流(通常是最简单的)
2. 返回 promise (很少见)
3. 使用提供给任务函数的回调方法。

首先，您在 rev-js 方法中获得了回调参数。通过包含变量 (cb)，但从不使用它，该任务将永远“完成”，因此 rev 将等待它.

其次，您在每个任务中都有两组流，它们同时运行——而不是像您想象的那样一个接一个地运行。例如，在rev-js中，先启动js任务，然后启动html任务，然后任一个都可以按任意顺序处理完成。最有可能的是，HTML 任务将在所有 JS 文件处理完毕之前完成。

就我个人而言，我会拆分 HTML 任务并使用现有插件之一(例如 gulp-inject ，这很简单)，然后单独处理。

因此，对于这种情况，您的文件将如下所示

gulp.task('rev', ['rev-html'] );

gulp.task('rev-html', ['rev-js', 'rev-css'], function() {
  // change to reference specific JS and CSS files as necessary
  return gulp.src(['./build/public/**/*.*', '!./build/public/index.html'])
    .pipe(inject('index.html'))
    .pipe(gulp.dest('./build/public'));
});

gulp.task('rev-js', function() { // NOTE: no `cb` here
  var context = rev.Context();
  return gulp.src(['./build/public/js/woddy.js', './build/public/js/angular.js', './build/public/js/components.js'])
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/js'));
});
gulp.task('rev-css', function() {
  var context = rev.Context();
  return gulp.src('./build/public/styles/woddy.css')
    .pipe(rev(context))
    .pipe(gulp.dest('./build/public/styles'));
});

---

现在，如果你真的想手动处理注入(inject)，那么你应该使用 stream combiner并返回该流的结果。但是您仍然需要在 HTML 步骤之前完成 JS 步骤。