Я выполняю рефакторинг своего gulpfile, теперь я использую gulp v4, и у меня возникла проблема с gulp watch, где не работает моя функция stylesCompileIncremental. Любая помощь или указатели будут высоко оценены.
Мой рефакторинг включает в себя:
- Переключение на использование функций вместо gulp.task
- Использование
series и parallel согласно документам
- Экспорт общедоступных задач внизу моего gulpfile, т.е.
exports.stylesWatch = stylesWatch;
- Добавление обратных вызовов в функции, чтобы сообщить Gulp, что функция завершена
Код для затронутых задач следующий (пути к каталогам хранятся в файле package.json, следовательно, pathConfig.ui ... values):
// Compile only particular Sass file that has import of changed file
function stylesCompileIncremental(cb) {
sassCompile({
source: getResultedFilesList(changedFilePath),
dest: pathConfig.ui.core.sass.dest,
alsoSearchIn: [pathConfig.ui.lib.resources]
});
cb();
}
// Compile all Sass files and watch for changes
function stylesWatch(cb) {
createImportsGraph();
var watcher = gulp.watch(pathConfig.ui.core.sass.src + '**/*.scss', gulp.parallel(devServReloadStyles));
watcher.on('change', function(event) {
changedFilePath = event;
});
cb();
}
// reload css separated into own function. No callback needed as returning event stream
function reloadCss() {
return gulp.src(generateFilePath)
.pipe($.connect.reload()); // css only reload
}
function devServReloadStyles(cb) {
gulp.series(stylesCompileIncremental, reloadCss);
cb();
}
Когда я запускаю gulp stylesWatch с использованием своего рефакторингового кода, я получаю следующий вывод (обратите внимание, что задача stylesCompileIncremental не запускается):
Итак, работа с часами успешно запущена, но что-то не так, когда devServReloadStyles запущен, чтобы функция stylesCompileIncremental не сработала.
Исходный код перед рефакторингом (при использовании gulp v3) приведен ниже:
// Compile only particular Sass file that has import of changed file
gulp.task('styles:compile:incremental', () => {
return sassCompile({
source: getResultedFilesList(changedFilePath),
dest: pathConfig.ui.core.sass.dest,
alsoSearchIn: [pathConfig.ui.lib.resources]
});
});
// Compile all Sass files and watch for changes
gulp.task('styles:watch', () => {
createImportsGraph();
gulp.watch(
pathConfig.ui.core.sass.src + '**/*.scss',
['devServ:reload:styles']
).on('change', event => changedFilePath = event.path);
});
// Reload the CSS links right after 'styles:compile:incremental' task is returned
gulp.task('devServ:reload:styles', ['styles:compile:incremental'], () => {
return gulp.src(generateFilePath) // css only reload
.pipe($.connect.reload());
});
Исходный вывод задачи при запуске styles:watch такой:
И это переменная sassCompile, используемая внутри stylesCompileIncremental, которую я пока не изменил.
/**
* Configurable Sass compilation
* @param {Object} config
*/
const sassCompile = config => {
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const postProcessors = [
autoprefixer({
flexbox: 'no-2009'
})
];
return gulp.src(config.source)
.pipe($.sourcemaps.init({
loadMaps: true,
largeFile: true
}))
.pipe(sass({
includePaths: config.alsoSearchIn,
sourceMap: false,
outputStyle: 'compressed',
indentType: 'tab',
indentWidth: '1',
linefeed: 'lf',
precision: 10,
errLogToConsole: true
}))
.on('error', function (error) {
$.util.log('\x07');
$.util.log(error.message);
this.emit('end');
})
.pipe(postcss(postProcessors))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(config.dest));
};
UPDATE
Это связано с проблемой с моей функцией devServReloadStyles, хотя я до сих пор не знаю, почему. Если я изменю свою функцию stylesWatch на использование оригинальной задачи devServ:reload:styles, то запускается stylesCompileIncremental.
// Compile all Sass files and watch for changes
function stylesWatch(cb) {
createImportsGraph();
var watcher = gulp.watch(pathConfig.ui.core.sass.src + '**/*.scss', gulp.parallel('devServ:reload:styles'));
watcher.on('change', function(event) {
changedFilePath = event;
});
cb();
}
Было бы хорошо не использовать старое задание и использовать его как функцию.
Кто-нибудь может сказать мне, почему моя измененная версия не работает, и есть предложения относительно того, как это должно выглядеть?