Build and inject files only on change in gulp

Question

I am using gulp-inject and hash-generator to build my javascript files with unique names every time so as to avoid caching issues.Before building I run gulp-clean to remove the previously generator javascript files. The problem is, now every time I run npm build files are being rebuild even when nothing has changed in the source. I would like to check if something has changed in the source file before running clean and inject. I think gulp-changed has the solution, but not sure how to make it work with the hash and cleaning. Part of my implementation looks like this.

gulp.task('clean-scripts', function () {
// return del(['./static/js/**/*.js'])
return gulp.src(['./static/js/temp/**/*.js', './static/css/**/style-*.css'], {read: false})
.pipe(clean());
});

gulp.task('index', function () {
var target = gulp.src('./templates/base.html');
// It's not necessary to read the files (will speed up things), we're only after their paths: 
var sources = gulp.src(['./static/js/temp/**/*.js', './static/css/'+cssFileName], {read: false}, {relative : true});

return target.pipe(inject(sources))
.pipe(gulp.dest('./templates'));
});

henry · Answer 1 · 2016-09-08T19:46:23.917

You can do this with gulp-rev or the fork gulp-revall. The gulp-rev documentation is pretty bare; check out the gulp-revall documentation for a good discussion of what both do and what their differences are (the biggest difference is gulp-rev-all checks for changes not only in the files you pass it but also in the files they reference).

Having a little trouble telling exactly how this would fit into the gulp tasks you provided, but here's a working generic example of each plugin:

gulp rev will copy everything in /src to /dest-rev, appending a hash to the filename (default format is basename-a2c4e6g8i0.ext; you can add a prefix and/or suffix to the hash, and can change the extension)
gulp revall does the same but uses /dest-revall (default format is basename.a2c4e6g8.ext; you can add a prefix to the hash, transform the basename, transform the file's path, and change the hash length).

The hash depends on the file contents: change the file, and the hash will change. Revert the file, and the hash reverts. (Handy: say someone visits, then you push a changed version with a new hash, then you realize the change was a mistake, revert, and push the reverted version. If the visitor doesn't refresh between the pushes, they'll still be able to rely on their cached copy.)

In package.json

"dependencies": {
  "del": "^2.2.2",
  "gulp": "^3.9.1",
  "gulp-rev": "^7.1.2",
  "gulp-rev-all": "^0.8.24"
}

gulpfile.js

const gulp = require('gulp'),
      del = require('del'),
      rev = require('gulp-rev'),
      revAll = require('gulp-rev-all');

gulp.task('rev', function() {
    del('dest-rev');
    return gulp.src('src/*')
        .pipe(rev())
        .pipe(gulp.dest('dest-rev'));
});

gulp.task('revall', function() {
    del('dest-revall');
    var rev_all = new revAll();
    gulp.src('src/*')
        .pipe(rev_all.revision())
        .pipe(gulp.dest('dest-revall'));
});

Regardless of whether you use gulp-rev or gulp-revall, you'll be able to (and will need to) rewrite occurrences of filenames that have been renamed – see the plugins' documentation for details.

Note that I'm deleting the output directories because otherwise the previous versions of the files would be kept. If you want to keep those previous versions around, just get rid of the del calls.

Build and inject files only on change in gulp

1 Answers1