Changes in scss file doesn't reload browser

[niralivasoya]

Hi There.!

I want to build my code with gulp, track changes if made and re-build & re-load browser automatically. Below i have attached my gulpfile.js. All other tasks are successfully working but watch doesn't work only when any changes made in scss file. It perfectly reload browser on any changes in html file but not working in case of scss file.

gulp version: 4.0.2
node version: 10.16.0

gulpfile.txt

Please help me to solve this problem.!
Thank you.!

[phated]

Unfortunately, your gulpfile is written incorrectly. Maybe someone from the community can rewrite it and provide you a diff.

[noxasch]

Here is a working example following the latest gulp 4 recommendation, your code are still using the old gulp API and it is not a recommended pattern anymore. reference: gulp task()

npm i -D autoprefixer gulp gulp-sass gulp-postcss cssnano gulp-sourcemaps gulp-terser-js gulp-replace gulp-rename gulp-concat

Explanation:
gulp-sass gulp-postcss cssnano gulp-sourcemaps - are used for sass/scss processing

gulp-terser-js - is the recommended way to uglify and minify javascript

gulp-concat - concatenate multiple javascript (that doesn't use import or require) file into one (if you are using es6 import use gulp-rollup, commonjs require can use browserify for this purpose)

// init modules
const { src, dest, watch, series, parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcss = require('gulp-postcss');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const terser = require('gulp-terser-js');
const replace = require('gulp-replace');
const rename = require('gulp-rename');
const concat = require('gulp-concat');

// source file path
const files = {
  scssPath: 'src/**/*.scss',
  jsPath: 'src/**/*.js'
}

function scssTask() {
  return src(files.scssPath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist'));
};

function jsTask() {
  return src(files.jsPath)
    .pipe(sourcemaps.init())
    .pipe(concat('all.js')) // final output file name
    .pipe(terser())
    .pipe(sourcemaps.write('.'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(dest('dist'));
};

function watchTask() {
  watch([files.scssPath, files.jsPath], 
    parallel(scssTask, jsTask));
}

exports.default = series(
  parallel(scssTask, jsTask), // make sure task is in parallel
  watchTask);

[niralivasoya]

Thank you! @noxasch for the help.