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

时间:2019-01-02 10:17:04

标签: javascript node.js gulp gulp-watch

我现在正在重构gulp文件,我正在使用gulp v4,并且在gulp watch不能运行我的stylesCompileIncremental函数时遇到问题。任何帮助或指示,将不胜感激。

我的重构包括:

  • 切换为使用函数代替gulp.task
  • 按照docs使用seriesparallel
  • 导出公共任务到我的gulpfile的底部,即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任务未运行):

Refactored output

所以我的监视任务已成功运行,但是运行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时,原始任务输出是这样的:

Original output

这是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();
}

最好不要使用旧任务并将其作为函数。 谁能告诉我为什么我的重构版本不起作用,并且对它的外观有任何建议?

1 个答案:

答案 0 :(得分:0)

我现在已解决此问题。 gulp.seriesgulp.parallel返回函数,因此不需要将stylesCompileIncrementalreloadCss包装在另一个函数中。 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由于不是函数而不会显示)。

enter image description here