Gulp Changed не работает
Я ранее использовал глоток, измененный с моим JS без проблем. Однако сейчас я пытаюсь использовать gulp-changed
а также gulp-newer
на моем scss
файлы без него, обнаружив, какой файл был изменен.
var changed = require('gulp-changed');
var newer = require('gulp-newer');
var SRC = './stylesheets/**/*.scss';
var DEST = './stylesheets';
gulp.task('sass', function () {
return gulp.src(SRC)
.pipe(changed(DEST)) //tried newer here as well
.pipe(sass())
.pipe(gulp.dest(DEST))
});
При изменении файла scss он выдаст изменения, но не изменит scss
[BS] Watching files...
[09:26:13] Starting 'sass'...
[09:26:14] Finished 'sass' after 180 ms
Часы
gulp.task('watch', ['setWatch', 'browserSync'], function () {
gulp.watch('./stylesheets/**/*.scss', ['sass']);
});
Ожидаемый выходной файл существует и не изменялся со вчерашнего дня.
Как я могу получить scss для компиляции только измененных файлов.
1 ответ
Это раздражало меня и в последние несколько дней, и я думаю, что нашел альтернативное решение. Выше я видел, что у вас это работает, но я решил, что в любом случае могу поделиться, если это кому-то поможет.
Это требует gulp-cached
(который я уже использовал, но я не мог получить gulp-changed
или же gulp-newer
работать тоже). Первоначально я пытался кэшировать в начале моего конвейера компиляции, например, как changed|newer
(должны?) работать, но это тоже не удалось. Через минуту я осознал свою очевидную ошибку: операции кэширования должны выполняться после того, как все файлы обработки и вывода готовы для записи в каталог назначения, но прямо перед тем, как это действительно произойдет.
Ergo:
gulp.watch('path/to/**/*.scss')
.pipe(sass())
<<... rename, minify, etc ...>>
.pipe(cached('sass_compile'))
.pipe(gulp.dest('path/to/dest/'));
Вот и все. Кеш пуст при запуске процесса Gulp, поэтому все файлы Sass компилируются, их скомпилированные версии (CSS) добавляются в кеш, а затем записываются на диск.
Затем, когда вы редактируете и сохраняете файл SCSS, Sass снова перекомпилирует все, что соответствует глобусу src, но если содержимое совпадает (попадание в кэш), то в SCSS были изменены только пробелы или форматирование, и вызов gulp.dest
не бывает Если версия в кэше отличается (отсутствует), содержимое записывается на диск.