当 SASS 发生变化时，如何让 gulp-watch 生成 CSS 文件？答案

【问题标题】：How can I make gulp-watch generate CSS file when SASS changes?当 SASS 发生变化时，如何让 gulp-watch 生成 CSS 文件？
【发布时间】：2015-02-05 09:45:43
【问题描述】：

这是我的代码：

gulp.task('sass', function () {
    gulp.src('./public/stylesheets/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/stylesheets/'));
});

gulp.task('watch-saas', function () {
    watch('./public/stylesheets/*.scss', function () {
        gulp.start('sass');
    });
});

输出：

[19:15:46] Using gulpfile ~/WebstormProjects/mySite/gulpFile.js
[19:15:46] Starting 'watch-saas'...
[19:15:46] Finished 'watch-saas' after 38 ms

恐怕没有 CSS。任何想法如何使这项工作？

我认为我的代码看起来很像示例代码here。 'sass' 任务本身运行良好。

【问题讨论】：

标签： node.js sass gulp-watch node-sass

【解决方案1】：

我对 Gulp 的经验不是很丰富，但我通常使用：

gulp.task('watch-saas', function () {
    return gulp.watch(['./public/stylesheets/*.scss'], ['sass']);
});

我假设你必须在你的任务中返回结果，因为它是一个异步任务。

【讨论】：

这是使用 gulp-watch 而不是 gulp.watch。尽管它确实阻止了“已完成”消息的出现，但似乎没有帮助。
顺便说一句，您的代码也不起作用。也许我的设置有问题。
看来它确实有效。问题是我是从 Webstorm 运行它的，我想我在自动保存发生时误解了。

【解决方案2】：

我们应该首先通过管道让 gulp 在我们的 scss 或我们警告的文件中观察它的变化

var gulp = require('gulp')
var watch = require('gulp-watch');

gulp.task('styles', function(){
    return  gulp.src(''./public/stylesheets/.scss'').pipe(gulp.dest('./sass'));  
});

watch('./public/stylesheets/.scss', function(){
    gulp.start('styles');
 });

styles是我在这里分配的任务名称

【讨论】：