Gulp 不看 .scss 文件？

Question

我的设置如下所述。好消息：正在编译样式，坏消息：gulp 似乎没有观察 scss 文件的变化并自动编译？

// Include gulp
var gulp = require('gulp'); 


// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');

// Styles
gulp.task('styles', function() {
    gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
        .pipe(include())
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});


// Watch
gulp.task('default', ['watch'], function() {
    gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});

gulp.task('default', ['styles', 'watch']);

Answer 1

我认为这是因为您有两个任务default。我猜 gulp 忽略第一个（gulp.watch）只触发第二个。那么你对 watch 有依赖，但好像 watch 不存在？

您可以在本地安装 gulp-watch，并将其包含在您的文件中。看看gulp-watch documentation 可能会有帮助。

试试这个：D

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

// Styles
gulp.task('styles', function() {
    gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
        .pipe(include())
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});


// Watch
gulp.task('watch', function() {
    watch('./_themes/blanktheme/ui/scss/*.scss', function () {
        gulp.start('styles');
    });
});

gulp.task('default', ['styles', 'watch']);