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

Question

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

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

我尝试使用 Promise 和回调（见下文）来允许同步任务，但从来没有同时使用 css 和 js md5 引用。

sindresorhus 的 lib 只重命名文件而不修复链接，所以有没有更好的方法来修复 html 链接，或者正在使用他们要去的分叉插件（我缺少一些修复）？

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'));
});

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

score 5 · Accepted Answer

gulp 中的几乎所有操作都是异步的，这意味着您需要使用3 种支持的方法之一来通知任务何时完成。（如果一个任务是真正同步的，你不需要做任何事情。）

从方法返回一个流（通常是最简单的）
返回一个承诺（在 gulp 中很少见）
使用提供给任务函数的回调方法。

首先，您的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'));
});

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

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

1 回答 1

Related

Reference