如何让gulp-watch在SASS更改时生成CSS文件？

Question

这是我的代码：

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。有什么想法可以让它正常工作吗？

我认为我的代码看起来非常像这里的示例代码。而且'sass'任务单独运行时也能正常工作。

- Ian Warburton

Answer 1

我在Gulp方面经验不是很丰富，但通常我会使用以下内容：

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

我假设你需要在任务中返回结果，因为这是一个异步任务。

- g00glen00b

---

这里使用的是gulp-watch而不是gulp.watch。虽然它可以阻止“Finished”消息的出现，但似乎并没有帮助到什么。 - Ian Warburton

顺便提一下，你的代码也不起作用。也许是我的设置有问题。 - Ian Warburton

看起来它确实起作用了。问题是我正在从Webstorm运行它，我认为我一直误解了自动保存发生的时间。 - Ian Warburton

Answer 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 是我在这里分配的任务名称

- manikandan