Gulp watch doesn't not compile my .scss at each modification

Question

I encounter a problem with Gulp, I can not compile my .scss at each modification. When I run "gulp watch" and make changes in my css, nothing happens.

gulp css works, gulp watch doesn't work.

Yet everything looks good.

Do you have an idea ?

Thanks !

// Requires
var gulp = require('gulp');

// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');


// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
  return gulp.src('./src/assets/css/style.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(rename('knacss.css'))
    .pipe(gulp.dest('./dist/assets/css/'))
    .pipe(rename('style.css'))
    //.pipe(sourcemaps.init())
    .pipe(minifycss())
    //.pipe(sourcemaps.write('.', {includeContent: false}))
    .pipe(gulp.dest('./dist/assets/css/'));
});

// Watcher
gulp.task('watch', function() {
  gulp.watch(['./src/assets/css/*.scss'], ['css']);
});


gulp.task('default', ['css']);

Answer 1

Gulp watch doesn't not compile my .scss at each modification

That's because you don't tell it to.

You are only watching *.scss files in ./src/assets/css, not in subfolders.

To include subfolders, use this syntax:

gulp.task('watch', function() {
  gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});