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

Gulp 不看 .scss 文件？

Gulp not watching .scss files?

sass

npm

gulp

watch