Gulp watch 未检测到文件更改答案

【问题标题】：Gulp watch not detecting file changesGulp watch 未检测到文件更改
【发布时间】：2021-07-16 16:08:57
【问题描述】：

我的 Gulp 任务正在正确启动，但未检测到文件更改。我正在从 starter-bootstrap 开发一个 WordPress 主题。运行“npm install”和安装的所有依赖项。现在，当我运行“npm run watch”时，gulp 会说：

> gulp watch

[18:01:24] Using gulpfile /mnt/c/Users/victor/Local Sites/camping-fin-de-siglo/app/public/wp-content/themes/fin-de-siglo/gulpfile.js
[18:01:24] Starting 'watch'...

就是这样，不检测文件更改。源路径正确。这是我的 gulpfile.js

const gulp = require( 'gulp' ),
    fancylog = require( 'fancy-log' ),
    browserSync = require( 'browser-sync' ),
    server = browserSync.create(),
    dev_url = 'http://localhost/starter-bootstrap';


/**
 * Define all source paths
 */

var paths = {
    styles: {
        src: './assets/*.scss',
        dest: './assets/css'
    },
    scripts: {
        src: './assets/*.js',
        dest: './assets/js'
    }
};


/**
 * Webpack compilation: http://webpack.js.org, https://github.com/shama/webpack-stream#usage-with-gulp-watch
 * 
 * build_js()
 */

function build_js() {
    const compiler = require( 'webpack' ),
        webpackStream = require( 'webpack-stream' );
    
    return gulp.src( paths.scripts.src )
        .pipe(
            webpackStream({
                config: require( './webpack.config.js' )
                },
                compiler
            )
        )
        .pipe(
            gulp.dest( paths.scripts.dest )
        )
        /*.pipe(
            server.stream() // Browser Reload
        )*/;
}


/**
 * SASS-CSS compilation: https://www.npmjs.com/package/gulp-sass
 * 
 * build_css()
 */

function build_css() {
    const sass = require( 'gulp-sass' ),
        postcss = require( 'gulp-postcss' ),
        sourcemaps = require( 'gulp-sourcemaps' ),
        autoprefixer = require( 'autoprefixer' ),
        cssnano = require( 'cssnano' );
    
    const plugins = [
        autoprefixer(),
        cssnano(),
    ];
    
    return gulp.src( paths.styles.src )
        .pipe(
            sourcemaps.init()
        )
        .pipe(
            sass()
                .on( 'error', sass.logError )
        )
        .pipe(
            postcss(plugins)
        )
        .pipe(
            sourcemaps.write( './' )
        )
        .pipe(
            gulp.dest( paths.styles.dest )
        )
        /*.pipe(
            server.stream() // Browser Reload
        )*/;
}

/**
 * Watch task: Webpack + SASS
 * 
 * $ gulp watch
 */

gulp.task('watch',
    function () {
        // Modify "dev_url" constant and uncomment "server.init()" to use browser sync
        /*server.init({
            proxy: dev_url,
        } );*/

        gulp.watch( paths.scripts.src, build_js );
        gulp.watch( [ paths.styles.src, './assets/scss/*.scss' ], build_css );
    }
);

有什么想法吗？

【问题讨论】：

两个 cmets： 1. 你的路径是相对于你的gulpfile.js 的位置吗？ 2、尝试`gulp.watch(paths.scripts.src, gulp.series(build_js));`有时似乎会有所作为（尽管它不应该）。
1 - 是的，是相对的。 src：'./assets/*.scss'，dest：'./assets/css'。 2 - 没有区别。

标签： node.js gulp gulp-watch gulp-sass

【解决方案1】：

首先，您可能需要迁移到 Gulp V4。

如需帮助，您可以阅读article 或观看此video

如果您不想这样做，可以按照以下步骤操作，您可以复制以下代码：

将监视任务替换为：

function watchFunc(cb) {

    // Modify "dev_url" constant and uncomment "server.init()" to use browser sync
    /*server.init({
       proxy: dev_url,
    } );*/
    
    // Create the watchers
    let jsWatcher = gulp.watch( [ paths.scripts.src ] );
    let scssWatcher = gulp.watch( [ paths.styles.src, './assets/scss/*.scss' ]);

    // Run the tasks when it detects a file change
    jsWatcher.on('change', build_js)
    scssWatcher.on('change', build_css )
    
    // Ends so it dose not get stuck on "[18:01:24] Starting 'watch'..." (Don't worry it still regesters watches)
    cb();
}

通过将其添加到文件末尾来修复任务


exports.watch = watchFunc

有关gulp.js documentation 或chokidar documantation 的更多信息（Gulp 用于观看的包...）

编辑 1：忘记在末尾添加回调 (cb())，因此任务不会卡住

【讨论】：