Search code examples
javascriptgulpgulp-watchgulp-4

Gulp 4 watch task is not detecting changes

I am trying to switch to Gulp version 4 from Gulp version 3 and I am constantly having issues with watch task, it will not detect changes when the tracked SCSS file is changed. I made a simple example of the watch function since it is easier for debugging. 

Ubuntu 17.10
Node v8.9.4
Npm 6.9.0
Gulp CLI version: 2.2.0
Gulp Local version: 4.0.2

I tried removing gulp and gulp-cli completely and installing it again, removing node_modules folder and creating package.json file from scratch but the result is the same. "Starting 'watch'..." and nothing else.

package.json

    {
      "name": "starter",
      "version": "1.0.0",
      "description": "",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "gulp": "^4.0.2",
        "gulp-sass": "^4.0.2"
      }
    }

gulpfile.js

const {src, dest, watch} = require('gulp');
const sass= require('gulp-sass');

function style() {
    return src('./scss/**/*.scss')
        .pipe(sass())
        .pipe(dest('./css'));
}

function watchTask() {
    watch('./scss/**/*.scss', style);
}

exports.style = style;
exports.watch = watchTask;

Note: Style task is working correctly and moving all .scss files from source to destination.

I really appreciate any help since I am running out of ideas.

Solution

  • gulp watch detects changes after it boots up, not between this run and last run of gulp watch.

    You need to tell gulp watch to run the first style task regardless.

    function watchTask() {
  watch('./scss/**/*.scss', {ignoreInitial: false}, style);
}

    Then it will re-run style task whenever you touched some scss file again.

    Update:

    Are you using files on docker or a network mapped disk? You might need to turn on {usePolling: true} as documented "needed for successfully watching files over a network or other non-standard situations. "