javascript - Gulp-rev-all 在每次运行时创建新文件

Question

gulp-rev-all 有问题。我有以下基本的 gulpfile:

var gulp = require('gulp'),
    RevAll = require('gulp-rev-all'),
    autoPrefixer = require('gulp-autoprefixer'),
    rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    sourceMaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
  var stream = gulp.src('./app/assets/stylesheets/application.scss')
    .pipe(sourceMaps.init())
    .pipe(sass({errLogToConsole: true}))
    .pipe(autoPrefixer())
    .pipe(rename("application.css"))
    .pipe(sourceMaps.write("."))
    .pipe(gulp.dest("./public/assets/stylesheets/"))
});

gulp.task('production', function() {
  gulp.src('./public/*assets/**')
    .pipe(RevAll.revision())
    .pipe(gulp.dest('./public'))
    .pipe(RevAll.versionFile())
    .pipe(gulp.dest('./app/assets'));
});

gulp.task('default', ['sass', 'production']);

期望与现实

当我运行 gulp 时，它出现以下错误:

Error: revision() must be called first!

但是当我删除生产任务并运行以下命令时，sass 任务照常完成:

gulp.task('default', ['sass']);

在此任务创建文件后，将默认任务更改回包含生产任务将成功完成并创建指纹 CSS 文件。

当我再次运行 gulp 时，它做了一些奇怪的事情:

1. 第一个 gulp 任务(没有 proudction 任务)创建:

   application.css (这个任务是幂等的)

2. 然后我第一次在生产环境中运行 gulp 任务。该文件夹现在看起来像:

   应用程序.css

   application.4434fcd5.css

3. 然后我再次运行它，现在文件夹如下所示:

   应用程序.css

   应用程序.4434fcd5.css

   application.4434fcd5.4434fcd5.css

问题

我认为这两个问题都源于生产任务中的某些东西造成了某种查找问题。这是什么？

Answer 1

(1) 你的第一个问题是这一行:

gulp.task('default', ['sass', 'production']);

这并不像您想象的那样。它不运行 sass 任务，然后运行 ​​production 任务。它同时运行。

这意味着您的 production 任务将尝试在您的 sass 任务创建任何文件之前修改您的 ./public/ 文件夹中的文件那里的文件。由于没有文件，您最终得到了 revision() must be called first! 错误消息。

您需要告诉 gulp 您的 production 任务 depends 在您的 sass 任务上:

gulp.task('production', ['sass'], function() {

然后您需要从您的 sass 任务返回流，以便 gulp 知道何时您的 sass 任务 has finished :

gulp.task('sass', function () {
  var stream = gulp.src('./app/assets/stylesheets/application.scss')
  //...
  return stream;
});

(2) 你的第二个问题是这一行:

gulp.src('./public/*assets/**')

这不仅匹配application.css，还匹配application.4434fcd5.css。因此，您已经修改过的文件将再次修改。

你可以用不同的方式解决这个问题，但最简单的可能是每次运行你的 sass 任务时删除整个 ./public 文件夹(使用 del ) .

var del = require('del');

gulp.task('clean', function() { 
  return del('./public');
});

gulp.task('sass', ['clean'], function() {
  //...
});

这有一个额外的好处，当你的一个文件发生变化时，你不会在你的 ./public/ 文件夹中得到多个修订的文件(这会导致不同的散列，因此不同的文件名)。