Question

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

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

我试图使用promises和回调（见下文）来允许同步任务，但从来都不是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

Answer 1

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

从方法（通常是最简单的）
返回承诺（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'));
});

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

Gulp有两个相互冲突的任务

1 个答案: