Gulp Watch, SASS does not change you

Question

Gulp Watch, SASS does not change you

Navigation

#1 by (0 votes)

1

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 could be wrong?

javascript node.js npm gulpjs gulp

asked by anonymous 11.07.2016 / 21:34

1 answer

Resize the form as hidden fields are displayed Problem saving image from camera to server

score 0 · Accepted Answer

The problem is in the gulp-ruby-sass module that 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 just to split the parameters, you should choose only one, it depends on where you installed the dependency, dependencies: {} then is --save or if it was within devDependencies: {} then it is --save-dev . For more information, visit link
/ li>
Finally, go to npm install --save-dev gulp-sass and replace the gulpfile.js parameter from gulp-ruby-sass with gulp-sass and task again.

Update

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

For example, the task ** set gulp sass will only run for gulp.task('./assets/sass/*.scss') files within .scss , but if you program the task to run recursively, it will have access to sub-directories within ./assets/sass/ , thus becoming ./assets/sass/ , simple ne?