Search code examples
csssassgulp-watchgulp-sass

Gulp Watch is not working in gulp 4.0.2 until run gulp again


In my gulfile.js, I'm using watch to compile scss files to css files. It runs without error and when I run gulp in powershell, it says that it is watching, but whenever I define a style in my scss file, it doesn't affect the css file which is created and I have to stop gulp and run it again. Actually, it's not watching carefully ! Here is my code. Thanks for any help.

"use strict";

var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCSS = require("gulp-clean-css");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var changed = require("gulp-changed");
var { task, series } = require("gulp");

var SCSS_SRC = "./src/Assets/scss/**/*.scss";
var SCSS_DEST = "./src/Assets/css";


task("compile_scss", function() {


	gulp
		.src(SCSS_SRC) 
		.pipe(sass().on("error", sass.logError)) 
		.pipe(minifyCSS())
		.pipe(rename({ suffix: ".min" }))
		.pipe(changed(SCSS_DEST)) 
		.pipe(gulp.dest(SCSS_DEST)); 
});


task("watch_scss", function() {
	gulp.watch(SCSS_SRC, series(["compile_scss"]));
});

task("default", series("watch_scss"));


Solution

  • For the problem be solved, as @Gabriel mentioned and according this link, I changed my code to this and the problem solved. But when I ran npm start, the watch stopped working; Therefore, I installed "concurrently" through npm and changed my start in package.json as mentioned here:

    npm install concurrently
    
    "start": "concurrently \"react-scripts start \" \"gulp \"",

    "use strict";
    
    var gulp = require("gulp");
    var sass = require("gulp-sass");
    var minifyCSS = require("gulp-clean-css");
    var uglify = require("gulp-uglify");
    var rename = require("gulp-rename");
    var changed = require("gulp-changed");
    var { task, series } = require("gulp");
    
    var SCSS_SRC = "./src/Assets/scss/**/*.scss";
    var SCSS_DEST = "./src/Assets/css";
    
    
    function compile_scss() {
    	return gulp
    		.src(SCSS_SRC)
    		.pipe(sass().on("error", sass.logError))
    		.pipe(minifyCSS())
    		.pipe(rename({ suffix: ".min" }))
    		.pipe(changed(SCSS_DEST))
    		.pipe(gulp.dest(SCSS_DEST));
    }
    
    function watch_scss() {
    	gulp.watch(SCSS_SRC, series(compile_scss));
    }
    
    exports.default = series(watch_scss);