让 Gulp watch 仅对更改的文件执行功能答案

【问题标题】：Get Gulp watch to perform function only on changed file让 Gulp watch 仅对更改的文件执行功能
【发布时间】：2015-02-16 16:21:06
【问题描述】：

我是 Gulp 的新手，拥有以下 Gulpfile

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

gulp.task('compress', function () {
    return gulp.src('js/*.js') // read all of the files that are in js with a .js extension
      .pipe(uglify()) // run uglify (for minification)
      .pipe(gulp.dest('dist/js')); // write to the dist/js file
});

// default gulp task
gulp.task('default', function () {

    // watch for JS changes
    gulp.watch('js/*.js', function () {
        gulp.run('compress');
    });

});

我想将其配置为重命名、缩小并仅将更改的文件保存到 dist 文件夹。做这个的最好方式是什么？

【问题讨论】：

How do I watch mutliple files with gulp-browserify but process only one? 的可能重复项

标签： javascript gulp gulp-watch

【解决方案1】：

方法如下：

// Watch for file updates
gulp.task('watch', function () {
    livereload.listen();

    // Javascript change + prints log in console
    gulp.watch('js/*.js').on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('JS changed' + ' (' + file.path + ')'));
    });

    // SASS/CSS change + prints log in console
    // On SASS change, call and run task 'sass'
    gulp.watch('sass/*.scss', ['sass']).on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('CSS changed' + ' (' + file.path + ')'));
    });

});

使用gulp-livereload 也很好，您需要安装Chrome plugin 才能让它工作。

【讨论】：

有没有办法尊重全局？ file.path 返回绝对路径，因此 ** 在涉及 gulp.dest() 时不受尊重。
@Markus。看gulp-changed

【解决方案2】：

见incremental builds on the Gulp docs。

您可以使用 gulp.src 函数的 since 选项和 gulp.lastRun 过滤掉任务运行之间未更改的文件

【讨论】：