使用 gulp v4 重构的监视任务不起作用

Question

我正在重构我的 gulp 文件，现在我正在使用 gulp v4 并且 gulp watch not 运行ning 我的 [=15] 有问题=] 功能。任何帮助或指点将不胜感激。

我的重构包括：

切换到使用函数而不是 gulp.task
根据 docs

series

parallel

正在我的 gulp 文件底部导出 public 任务，即 exports.stylesWatch = stylesWatch;
在函数中添加回调以告知Gulp函数完成

受影响任务的代码如下（目录路径存储在 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 任务不是运行）：

所以我的手表任务分配成功运行ning 但是当 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());
});

运行ning 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();
}

不使用旧任务并将其作为一个函数仍然很好。任何人都可以告诉我为什么我的重构版本不起作用并且对它的外观有什么建议吗？

Answer 1

我现在已经解决了这个问题。 gulp.series 和 gulp.parallel return 函数，因此不需要将 stylesCompileIncremental 和 reloadCss 包装在另一个函数中，即。 devServReloadStyles。根据布莱恩的评论 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 没有显示，因为它不是函数）。

使用 gulp v4 重构的监视任务不起作用

Refactored watch task using gulp v4 doesn't work

javascript

node.js

gulp

gulp-watch