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

Question

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

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 documentation довольно голый; просмотрите gulp-revall documentation для хорошего обсуждения того, что делают и чем отличаются их различия (самая большая разница - gulp-rev-all проверяет изменения не только в файлах, которые вы передаете, но и в файлах, которые они ссылаются).

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

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

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

в 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.