Gulp Watch, SASS no amendment

Question

My gulp:

var gulp      = require('gulp'),
	sass        = require('gulp-ruby-sass'),
	imagemin    = require('gulp-imagemin'),
	changed     = require('gulp-changed'),
	browserSync = require('browser-sync'),
    livereload = require('gulp-livereload');

gulp.task('sass', function () {
  gulp.src('./assets/sass/*.scss')
    .pipe(sass({compass: false}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(gulp.dest('./dist/css'))
    .pipe(livereload());
});

gulp.task('jpg', function() {
	gulp.src('./assets/img/**/*.jpg')
		.pipe(changed('./dist/img/'))
		.pipe(imagemin({
			progressive: true
		}))
		.pipe(gulp.dest('./dist/img/'));
});

gulp.task('browser-sync', function() {
    browserSync.init(['./dist/css/**', './views/**'], {
        server: {
            baseDir: './',
            index: './views/index.html'
        }
    });
});

gulp.task('watch', ['sass', 'browser-sync'], function () { 
    livereload.listen();
    gulp.watch('./assets/sass/**/*.scss', ['sass']);
});

When I run, everything works, but SASS does not detect changes. Index.html works fine.

What could be wrong?

Answer 1

The problem is in the module Gulp-ruby-Sass which is in my humble outmoded opinion. I advise you to do the following (I promise it won’t hurt):

• Turn the command npm uninstall --save | --save-dev gulp-ruby-sass, the pipe was just to split the parameters, you should choose only one, it will depend on where you installed the dependency, whether it went inside dependencies: {} so it is --save or whether it was within devDependencies: {} so it is --save-dev. For more information visit https://docs.npmjs.com/cli/uninstall

• Then install the module npm install --save-dev gulp-sass, this module is a more updated version of Gulp-ruby-Sass with some improvements (including performance).

• Finally, go to the gulpfile.js and replace the parameter of require() of Gulp-ruby-Sass for Gulp-Sass and run the task again.

---

Update

I also advise you to use the extension **/*.(js|css|jpg|etc) as using the marker ** you can rotate the tasks in a recursive way, i.e., task will be run inside the subdirectories of the specified directory.

Such as the task gulp sass definite gulp.task('./assets/sass/*.scss') will run only for files .scss inside ./assets/sass/, but if you program the task to run recursively, it will have access to subdirectories within ./assets/sass/, staying that way gulp.task('./assets/sass/**/*.scss'), simple thing?