Gulp Watch, SASS not Le change

Question

Gulp Watch, SASS not Le change

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.

What can be wrong?

1

node.js javascript npm gulp gulpjs

Author: Shelon, 2016-07-11

Source

1 answers

score 0 · Accepted Answer

The problem is in the module gulp-ruby-sass which is in my humble opinion outdated. I advise you to do the following (I promise it will not hurt):

Run the Command npm uninstall --save | --save-dev gulp-ruby-sass, the pipe was only to split the parameters, you should choose only one, this will depend on where you installed the dependency, if it was inside dependencies: {} then it is --save or if it was inside devDependencies: {} then it is --save-dev. For more information visit https://docs.npmjs.com/cli/uninstall
Soon after 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 gulpfile.js and replace the require() parameter from gulp-ruby-sass to gulp-sass and run the task again.

Update

I also advise you to use the extension **/*.(js|css|jpg|etc) because using the marker ** you can run the tasks in a recursive way, that is, the task will be run within the subdirectories of the specified directory.

As for example the task gulp sass defined gulp.task('./assets/sass/*.scss') will run only for the files .scss within ./assets/sass/, but if you program the task to run recursively, it will have access to subdirectories within ./assets/sass/, thus getting gulp.task('./assets/sass/**/*.scss'), simple right?