Javascript Gulp rev all正在每次运行时创建新文件

我有一个问题，

gulprevall

。我有以下基本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文件

当我再次大口大口喝时，它会做一些奇怪的事情：

第一次吞咽任务（不含骄傲任务）创建：

application.css

（此任务是幂等的）

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

application.css

application.4434fcd5.css

然后我再次运行它，现在文件夹看起来像：

application.css

application.4434fcd5.css

application.4434fcd5.4434fcd5.css

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

（1）您的第一个问题是这一行：

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

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

这和你想象的不一样。它不会先运行

sass

任务，然后再运行

生产任务。它同时运行两者

这意味着在
sass
任务在
sass
文件夹中创建任何文件之前，您的
production
任务将尝试修改
/public/
文件夹中的文件。因为并没有文件，所以必须首先调用
revision（）错误消息

您需要告诉gulp您的
sass
任务中的
production
任务：

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

然后您需要从
sass
任务返回流，以便gulp知道您的
sass
任务：

（2）您的第二个问题是这一行：

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

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

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

您可以用不同的方法解决这个问题，但最简单的方法可能是每次运行
sass
任务时删除整个
/public
文件夹（使用）

这还有一个额外的好处，即当您的一个文件发生更改时，您不会在
/public/
文件夹中出现多个修改过的文件（这会导致不同的哈希值，从而导致不同的文件名）。
我不是gulp方面的专家，但：

当我遇到这个问题时，我不得不在.pipe（revAll.revision（））之后调用.pipe（revDelete（））假设revDelete来自require（'gulp-rev-delete-original'））

执行上述操作，您将摆脱旧的散列文件。该解决方案的问题是，每次运行任务时，您都会有更长的文件名application.4434fcd5.4434fcd5.css、application.4434fcd5.4434fcd5.4434fcd5.css、application.4434fcd5.4434fcd5.4434fcd5.css等等。。。要解决这个问题，您可以检查文件是否已经有哈希，如果是肯定的话，您可以删除它。要实现这一点，可以将以下代码放在.pipe（revAll.revision（））之前：

.pipe（gulpif（hasOldHash，重命名为filenameHashRegex，））。hasOldHash是一种方法，它包含一个与哈希格式匹配的正则表达式，如果文件已经有一个旧哈希，则将其从文件名中删除

好的，这太多了，我将用代码总结所有内容：

// Imports
const gulp = require('gulp');
const revDelete = require('gulp-rev-delete-original');
const rename = require('gulp-regex-rename');
const gulpif = require('gulp-if');
const path = require('path');
const revAll = require("gulp-rev-all");

gulp.task('revall', function(){

    const dest = 'src/app/commons/components';

    // . + hash (8 exact alfanumeric characters), i.e.: test.a345fk39.js matches .a345fk39
    const filenameHashRegex = ****TODO****

    // Function that returns true if the filename has an old hash
    const hasOldHash = function(file) {
        const fileName = path.parse(file.path).name;

        if(filenameHashRegex.test(fileName)){
            console.log("***has old hash***");
            return true;
        }
    };

    return gulp.src('yourdesiredpath/**/*.{js,html}') // Source files to be hashed
        .pipe(gulpif(hasOldHash, rename(filenameHashRegex, ''))) // If the filename contains and old hash, removes it to add the new one
        .pipe(revAll.revision()) // Adds hash to the filename and update the references to that new hash
        .pipe(revDelete()) // Deletes all inactive and out of date files, so you are left with only the most recent hashed file
        .pipe(gulp.dest('yourdesiredpath')); // Final destinations where new hashed files are located
});

好东西。谢谢斯文！