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任務（無驕傲任務）創建：

   application.css (this task is idempotent)

2. 然后，我第一次在生產中運行gulp任務。 該文件夾現在看起來像：

   application.css

   application.4434fcd5.css

3. 然后我再次運行它，現在文件夾看起來像：

   application.css

   application.4434fcd5.css

   application.4434fcd5.4434fcd5.css

問題

我認為這兩個問題都源於生產任務中的某些問題，從而造成了某種查找問題。 它是什么？

Answer 1

（1）您的第一個問題是這條線：

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

這並沒有按照您的想法做。 它不會先執行sass任務，再執行production任務。 它同時運行。

這意味着您的production任務將在您的sass任務甚至在此創建任何文件之前嘗試修訂./public/文件夾中的文件。 由於沒有文件，因此revision() must be called first!帶有revision() must be called first!文件revision() must be called first! 錯誤信息。

您需要告訴gulp您的production任務取決於您的sass任務：

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

然后，您需要從sass任務返回流，以便gulp知道您的sass任務何時完成 ：

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/在./public/文件夾中最終擁有多個修訂過的文件（這將導致不同的哈希值，因此也將產生不同的文件名）。

Answer 2

我在吞咽方面不是很熟練，但是：

當我遇到這個問題時，我只需要在.pipe（revAll.revision（））之后調用.pipe（revDelete（）），假設revDelete來自require（'gulp-rev-delete-original'）

在上面做，您將擺脫舊的哈希文件。 該解決方案的問題在於，每次運行任務時，文件名都將更長：application.4434fcd5.4434fcd5.css，application.4434fcd5.4434fcd5.4434fcd5.css，application.4434fcd5.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
});