Question

我在使用gulp.watch检查我的.scss和图像文件的更改时遇到问题。它只在我创建或编辑JavaScript文件时才起作用，所以'watch'正在运行，但仅适用于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');
});

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

Answer 1

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

在您的情况下确实没有必要使用gulp-clean插件（它更适合其他场景）。请改用rimraf。
尽量避免使用gulp.start（...），因为它不应该被最终用户使用，并且它的支持很可能在将来的版本中被删除。您可以尝试使用现有的依赖项解析机制。例如，如果您的“脚本”，“图片”和“指南针”任务都依赖于“干净”，而您的“默认”类依赖于“脚本”，“图片”和“指南针”，那么“干净”任务将只执行一次。

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

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

Answer 2

好的，最后问题是gulp-notify插件。我只是评论了'指南针'和'图像'任务上的那些线，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' }));
});

gulp.js：＆＃39; gulp.watch＆＃39;并没有真正关注变化

2 个答案: