javascript - Gulp 没有正确查看我的 scss 文件

Question

我见过很多 stackoverflow 解决方案，但似乎没有一个适用于我的场景。

我的 gulp watch 似乎正在监视文件，但输出文件没有更新。

运行 gulp 工作正常，因为它默认设置为调用 sass 任务，并且该任务成功编译了我的输出 css。

这是我的目录结构:

- 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 给我:(11:01 是我保存文件的时间)

[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

关于为什么我的输出 css 没有改变的任何想法？

非常感谢!

Answer 1

这可能是 sass synthax 错误问题，因为你的 sass taks no handle 中没有任何功能。

这是我的 gulpfile 中的示例

尝试在你的 .pipe(sass()) 之后添加 .on('error', sass.logError))，这是一个粗略的例子:

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