时间戳

首页 > 解决方案 > Gulp4 watch 对变化没有反应

gulp-watch - Gulp4 watch 对变化没有反应

问题描述

迁移到 Gulp 4 我遇到了严重的问题：使用 gulp.watch 或 gulp-watch 时对更改没有反应。

import gulp from 'gulp';
// import {get as browserSync} from 'browser-sync';
import watch from 'gulp-watch';

// const bs = browserSync('server');


var bSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
    bSync.init({
        server: {
            baseDir: "../"
        },
        notify: true
    });
});


gulp.task('watch', gulp.parallel('browser-sync', ()=> {
    global.watch = true;

    gulp.watch('app/{styles,blocks}/**/*.+(less|styl)', gulp.series('styles', 'styles:lint', bSync.reload('styles/app-min.css')));
    gulp.watch(['app/+(images|fonts)/**/*', 'app/*.html'], gulp.parallel('copy', bSync.reload)); // or watch( instead of gulp.watch(

    gulp.start('scripts:watch');
    bSync.reload();
}));

和脚本代码：

import gulp from 'gulp';
import errorHandler from 'gulp-plumber-error-handler';
import makeWebpackConfig from '../webpack.conf.js';
import webpack from 'webpack';

const {NODE_ENV, NOTIFY} = process.env;
const isDebug = NODE_ENV !== 'production';
const scriptsErrorHandler = errorHandler('Error in \'scripts\' task');

function runWebpack(watch = false) {
    return function (callback) {
        const webpackConfig = makeWebpackConfig({
            watch,
            debug: isDebug,
            sourcemaps: isDebug,
            notify: NOTIFY
        });

        return webpack(webpackConfig, (error, stats) => {
            const jsonStats = stats.toJson();
            if (jsonStats.errors.length) {
                jsonStats.errors.forEach(message => {
                    scriptsErrorHandler.call({emit() {}}, {message});
                });
            }

            if (watch === false) callback();
        });
    };
}

gulp.task('watch', runWebpack(false));    
gulp.task('scripts:watch', runWebpack(true));

我的任务位于任务文件夹内。为了加载任务，默认任务使用 gulp-hub 模块：

var HubRegistry = require('gulp-hub');
gulp.registry(new HubRegistry(['*.js']));

这里的问题在哪里？

标签： gulp-watchwebpack-4gulp-4

解决方案

抱歉我没有早点回复。

我仍然习惯于在 Gulp 4 中工作，但我遇到的问题一直与不提供回调有关。我不确定这是否是最佳实践，但如果有疑问，我只是在每一个 gulp 任务中抛出一个回调。对于初学者，我会尝试这样做——在“watch”和“browser-sync”中添加一个空回调。此外，我会将 gulp.task('watch'...) 中的第二个参数更改为串行而不是并行，因为 watch 中的函数依赖于“浏览器同步”。

让我知道这些是否可以帮助您-抱歉，我无法提供更多帮助。

推荐阅读