Gulp-rev-all每次运行都会创建新文件

Question

I've got a problem with gulp-rev-all . I have the following basic 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']);

Expectation vs. reality

When I run gulp, it bombs out with the following error:

Error: revision() must be called first!

But when I remove the production task and run the following then the sass task finishes as usual:

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

After this task has created the files, changing the default task back to include the production task will successfully finish and create a fingerprinted CSS file.

When I run gulp again it does something strange:

1. First gulp task (without proudction task) creates:

   application.css (this task is idempotent)

2. Then I run the gulp task with production for the first time. The folder now looks like:

   application.css

   application.4434fcd5.css

3. Then I run it again and now the folder looks like:

   application.css

   application.4434fcd5.css

   application.4434fcd5.4434fcd5.css

The problem

I think both problems stem from something in the production task creating some sort of look up issue. What is it?

Answer 1

(1) Your first problem is this line:

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

This doesn't do what you think it does. It doesn't run the sass task and then the production task. It runs both at the same time.

That means that your production task will try to revision files in your ./public/ folder before your sass task has even created any files there. Since there are no files you end up with the revision() must be called first! error message.

You need to tell gulp that your production task depends on your sass task:

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

And then you need to return the stream from your sass task so that gulp knows when your sass task has finished :

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

(2) Your second problem is this line:

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

This doesn't just match application.css , but also application.4434fcd5.css . So your already-revisioned files are revisioned again .

You can solve this in different ways, but the easiest is probably to just delete your entire ./public folder every time you run your sass task (using del ).

var del = require('del');

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

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

This has the added benefit that you don't end up with multiple revisioned files in your ./public/ folder when one of your files changes (which results in a different hash and therefore a different file name).

Answer 2

I'm not very expert in gulp but:

When I faced that problem I just had to call .pipe(revDelete()) after .pipe(revAll.revision()) supposing revDelete comes from require('gulp-rev-delete-original')

Doing above you will get rid of the old hashed files. Problem with that solution is that every time you run the task you will have longer filenames application.4434fcd5.4434fcd5.css, application.4434fcd5.4434fcd5.4434fcd5.css, application.4434fcd5.4434fcd5.4434fcd5.4434fcd5.css, and so on... To solve this issue you can check if the file has already a hash or not, and in the positive case you remove it. To achieve that you can put the following code before .pipe(revAll.revision()):

.pipe(gulpif(hasOldHash, rename(filenameHashRegex, ''))). hasOldHash is a method that contains a Regular Expression that matches the hash format and removes it from the filename if the file already have an old hash.

Ok that was too much text, I will summarize everything using code:

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