After setting up Gulp to compile SCSS into CSS using NanoCSS and gulp-css for the first time, I encountered an issue. While my do-sass command successfully compiles SCSS and minifies CSS files, it does not run when placed within a watch task. Any changes made to SCSS files do not trigger the execution of the do-sass command. Can someone please advise on what might be causing this inconsistency?
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('./'))
});
// Minify .css files and reload browser.
gulp.task('mini-css', function() {
return gulp.src('styles.css')
.pipe(cssnano())
.pipe(gulp.dest('./'));
});
// Compile and minify css files.
gulp.task('do-sass', gulp.series('sass', 'mini-css'));
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
});