我现在正在重构gulp文件,我正在使用gulp v4,并且在gulp watch不能运行我的stylesCompileIncremental
函数时遇到问题。任何帮助或指示,将不胜感激。
我的重构包括:
series
和parallel
exports.stylesWatch = stylesWatch;
受影响的任务的代码如下(目录路径存储在package.json文件中,因此是pathConfig.ui ...值):
// 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
时,原始任务输出是这样的:
这是stylesCompileIncremental
内使用的sassCompile变量,我目前仍未对其进行更改。
/**
* 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));
};
更新
这是由于我的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();
}
最好不要使用旧任务并将其作为函数。 谁能告诉我为什么我的重构版本不起作用,并且对它的外观有任何建议?
答案 0 :(得分:0)
我现在已解决此问题。
gulp.series
和gulp.parallel
返回函数,因此不需要将stylesCompileIncremental
和reloadCss
包装在另一个函数中。 devServReloadStyles
。
根据布莱恩(Blaine)的评论here。
所以我的功能:
function devServReloadStyles(cb) {
gulp.series(stylesCompileIncremental, reloadCss);
cb();
}
可以仅分配给变量:
const devServReloadStyles = gulp.series(stylesCompileIncremental, reloadCss);
我的stylesWatch任务已经在调用devServReloadStyles:
// 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();
}
因此,运行gulp stylesWatch
现在会运行stylesCompileIncremental
作业(请注意,devServReloadStyles
由于不是函数而不会显示)。