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"));
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);