Gulp watch not detecting file changes

Question

my Gulp task is starting correctly but not deteccting file changes. I'm developing a WordPress theme from starter-bootstrap. Run 'npm install' and all dependecies where installed. Now when I run 'npm run watch', gulp says:

> 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'...

And thats it, is not detecting file changes. Source paths are correct. Here is my 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 );
    }
);

Any idea?

user_13592230 · Answer

First of all, you might need to migrate to Gulp V4.

For help with that, you could read the article or watch this video

If you don't want to do those you can follow these steps you can just copy this code:

Replace the watch task with this:

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

Fix the task by adding this to the end of the file


exports.watch = watchFunc

More Info on the gulp.js documentation or the chokidar documantation (The package Gulp uses for watching...)

EDIT 1: Forgot to add the call back (cb()) at the end so the task does'nt get stuck

Gulp watch not detecting file changes

1 Answers