Gulp没有正确地看我的scss文件

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!

Answer 1

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))
});