Gulp not watching my scss file correctly

Question

I've seen plenty of stackoverflow solutions to this, but none of the appear to work in my scenario.

My gulp watch appears to be watching the file but the output file is not being updated.

Running gulp works okay as it default is set to call the sass task, and the task successfully compiles my output css.

Here is my directory structure:

- css  
  - sass  
    * style.scss     
  * style.css  
* gulpfile.js

and my gulpfile:

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

// include plugins
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var cssbeautify = require('gulp-cssbeautify');
var cssmin = require('gulp-cssmin');

// compile sass
gulp.task('sass', function  () {
    return gulp.src('./css/sass/*.scss')
        .pipe(sass())
        .pipe(cssbeautify())
        .pipe(gulp.dest('css'));
});

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

// default task
gulp.task('default', ['sass']);

gulp watch gives me: (11:01 is when I saved the file)

[10:59:48] Using gulpfile ~/Sites/cla/8_0/web/intranet/reports/gulpfile.js
[10:59:48] Starting 'watch'...
[10:59:48] Finished 'watch' after 12 ms
[11:01:25] Starting 'sass'...
[11:01:25] Finished 'sass' after 24 ms

Any ideas as to why my output css isn't changing?

Many thanks!

Does the output update when you call the "sass" task by hand? — KWeiss, Apr 04 '16 at 10:09
The execution of your default task work fine ? if not, it is maybe your destination path, you can try "./css" ? — Pred05, Apr 04 '16 at 10:15
Probably you got some errors in you `scss` file. have you tried to add `on('error', sass.logError)` ? — The Reason, Apr 04 '16 at 10:16
@KWeiss and @Pred05 yea it does. running just `gulp` updates the output as the default task is "sass". — Simon Willan, Apr 04 '16 at 15:59

score 0 · Answer 1 · answered Apr 04 '16 at 10:54

0

It could be an sass synthax error issue, since you dont have any functionality in your sass taks no handle then.

Here is an example from my gulpfile

Try to add .on('error', sass.logError)), after your .pipe(sass()), here is a rough example:

gulp.task('sass',function(){                 
  gulp.src('./src/sass/main.scss')  
    .pipe(sass().on('error', sass.logError))
});

answered Apr 04 '16 at 10:54

IdeaMan

717
4
13

Unfortunately no errors show in the log. Everything appears to be fine. If I run gulp on its own, the sass is compiled fine, which leads me to believe the sass task is correct. – Simon Willan Apr 04 '16 at 14:27

Gulp not watching my scss file correctly

1 Answers1