node.js - 当 SASS 发生变化时，如何让 gulp-watch 生成 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' 任务本身运行良好。

Answer 1

我在 Gulp 方面没有那么有经验，但我通常使用：

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

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

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

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