Создавайте и вставляйте файлы только при изменении в gulp

Question

Я использую gulp-inject и hash-generator для создания моих файлов javascript с уникальными именами каждый раз, чтобы избежать проблем с кэшированием. Перед сборкой я запускаю gulp -clean для удаления ранее созданных файлов javascript генератора. Проблема в том, что теперь каждый раз, когда я запускаю npm, файлы сборки перестраиваются, даже если в исходном коде ничего не изменилось. Я хотел бы проверить, если что-то изменилось в исходном файле, прежде чем запускать чистую и ввести. Я думаю, что у gulp-change есть решение, но я не уверен, как заставить его работать с хэшем и очисткой. Часть моей реализации выглядит следующим образом.

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

Answer 1

Вы можете сделать это с gulp-rev или вилка gulp-revall, gulp-rev документация довольно проста; проверить gulp-revall документация для хорошего обсуждения того, что делают и каковы их различия (самая большая разница gulp-rev-all проверяет изменения не только в файлах, которые вы передаете, но и в файлах, на которые они ссылаются).

Возникли небольшие затруднения с точным объяснением того, как именно это будет соответствовать поставленным вами задачам, но вот рабочий общий пример каждого плагина:

• gulp rev будет копировать все в /src в /dest-rev, добавляя хеш к имени файла (формат по умолчанию basename-a2c4e6g8i0.ext; Вы можете добавить префикс и / или суффикс к хешу, и можете изменить расширение)
• gulp revall делает то же самое, но использует /dest-revall (формат по умолчанию basename.a2c4e6g8.ext; Вы можете добавить префикс к хешу, преобразовать базовое имя, преобразовать путь к файлу и изменить длину хеша).

Хеш зависит от содержимого файла: измените файл, и хеш изменится. Верните файл, и хэш вернется. (Удобно: скажем, кто-то посещает, затем вы нажимаете измененную версию с новым хешем, затем вы понимаете, что изменение было ошибкой, возвращаете и нажимаете возвращенную версию. Если посетитель не обновляется между нажатиями, он все равно будет быть в состоянии положиться на их кэшированную копию.)

В 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'));
});

Независимо от того, используете ли вы gulp-rev или же gulp-revall вы сможете (и должны будете) переписать вхождения имен файлов, которые были переименованы - подробности смотрите в документации по плагинам.

Обратите внимание, что я удаляю выходные каталоги, потому что в противном случае предыдущие версии файлов будут сохранены. Если вы хотите сохранить эти предыдущие версии, просто избавьтесь от del звонки.