gulp.js: 'gulp.watch' 并没有真正关注变化答案

【问题标题】：gulp.js: 'gulp.watch' is not really watching changesgulp.js: 'gulp.watch' 并没有真正关注变化
【发布时间】：2014-04-21 23:00:46
【问题描述】：

我在使用 gulp.watch 检查我的 .scss 和图像文件的更改时遇到问题。它仅在我创建或编辑 JavaScript 文件时有效，因此“监视”有效，但仅适用于 JavaScript 文件。这是我的代码：

var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
imagemin = require('gulp-imagemin'),
notify = require('gulp-notify'),
clean = require('gulp-clean'),
filesize = require('gulp-filesize');

gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js')) 
        .pipe(gulp.dest('build/dev/js'))
        .pipe(filesize())
        .pipe(uglify())
        .pipe(gulp.dest('build/production/js'))
        .pipe(filesize())
        .pipe(notify({ message: 'JavaScript task complete' }));
});

gulp.task('compass', function() {
    return gulp.src(['src/sass/**/*.scss'])
        .pipe(compass({
            css: 'src/css',
            sass: 'src/sass',
            image: 'src/images'
        }))
        .pipe(gulp.dest('build/dev/css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/production/css'))
        .pipe(notify({ message: 'Compass task complete' }));
});

gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
        .pipe(gulp.dest('build/dev/img'))
        .pipe(gulp.dest('build/production/img'))
        .pipe(notify({ message: 'Images task complete' }));
});

gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['scripts']);
    gulp.watch('src/sass/**/*.scss', ['compass']);
    gulp.watch('src/images/**/*', ['images']);
});


gulp.task('clean', function() {
    return gulp.src(['build/*'], {read: false})
        .pipe(clean());
});


gulp.task('default', ['clean'], function () {
    gulp.start('scripts', 'compass', 'images', 'watch');
});

所有任务在“默认”调用时都按预期运行。

【问题讨论】：

gulp-compass 似乎不支持“观看”。
我刚刚意识到，如果我评论'指南针'任务的最后三行，手表功能结合'指南针'任务可以完美运行。很奇怪。

标签： compass-sass gulp

【解决方案1】：

关于您的代码示例的一些提示：

在你的情况下确实不需要使用gulp-clean插件（它更适合其他场景）。请改用rimraf。
尽量避免使用 gulp.start(...)，因为它不应该被最终用户使用，而且它的支持很可能会在未来的版本中被删除。您可以尝试使用现有的依赖解析机制。例如，如果你的 'scripts'、'images' 和 'compass' 任务都依赖于 'clean'，而你的 'default' 类依赖于 'scripts'、'images' 和 'compass' 那么 'clean' 任务将只执行一次。

您可能想查看此项目中的gulpfile.js 示例：

https://github.com/KriaSoft/SPA-Seed.Front-end

【讨论】：

什么时候使用 clean？我看不出文档有什么不同。

【解决方案2】：

好的，最后问题出在 gulp-notify 插件上。我刚刚在 'compass' 和 'images' 任务中评论了这些行，gulp.watch 按预期运行。

我的指南针任务

gulp.task('compass', function() {
    return gulp.src('src/sass/**/*.scss')
        .pipe(compass({
            css: 'src/css',
            sass: 'src/sass',
            image: 'src/images'
        }))
        .pipe(gulp.dest('build/dev/css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/production/css'));
        //pipe(notify({ message: 'Compass task complete' }));
});

我的图片任务

gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
        .pipe(gulp.dest('build/dev/img'))
        .pipe(gulp.dest('build/production/img'));
        //.pipe(notify({ message: 'Images task complete' }));
});

【讨论】：