如何使用Gulp手表仅在修改过的文件上运行任务

Question

我有一个gulp文件中使用的当前gulp任务。路径来自config.json，一切都很完美：

//Some more code and vars...

gulp.task('watch', function() {
    gulp.watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], ['imagemin-cfg']);
})

//Some more code ...

gulp.task('imagemin-cfg', function () {
    return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
});

但我仍然有一个问题，我的项目中的图像数量很大，这项任务需要很长时间。我正在寻找一种方法来仅在修改过的文件上运行我的任务。如果我有一个图像或修改它，imagemin()将只在这个图像上运行，而不是在所有图像上运行。

一切都工作得很好，但运行时间真的很长。

谢谢。

Answer 1

“gulp-changed”不是这样做的最佳解决方案，因为它只在“buildType”文件夹中观看修改过的文件。

试试gulp-cached吧。

Answer 2

另一个选择是使用gulp.watch（“更改”）选项。

gulp
  .watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"])
  .on("change", function(file) {
      gulp
        .src(file.path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });

Answer 3

使用gulp.watch，您只能像这样定位更改的文件。

gulp.watch(["src/**/*"], function (obj) {
 return gulp.src(obj.path, {"base": "src/"})
 .pipe(gulp.dest("dest"));
});

编辑：对于Gulp v4：

const { watch, src, dest } = require('gulp');

var watcher = watch(["src/**/*"]);
watcher.on('change', function(obj){
    return src(obj.path, {base: 'src/'})
        .pipe(dest('dest'));
});

Answer 4

我可以建议你可以在自己的函数中操作路径和文件名的gulp-newy。然后，只需使用该函数作为newy()的回调。这使您可以完全控制要比较的文件。

这将允许1：1或多对1比较。

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}

Answer 5

是的，gulp-changed正是如此：

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

gulp.task('imagemin-cfg', function () {
return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
    .pipe(changed(buildType))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest(buildType))
    .pipe(connect.reload());
});

Answer 6

这是一个真实的例子，我一直用它来做这个，而不需要任何额外的包。我用它来缩小，重命名和编译js目录中的任何.js文件。编译后的文件将保存到dist目录中，并在扩展名之前附加.min。

// Compile JS
var compileJS = function( file ) {
    var currentDirectory = process.cwd() + '/';
    var modifiedFile = file.path.replace( currentDirectory, '' );

    gulp.src( modifiedFile )
        .pipe( uglify() )
        .pipe( rename( {
            suffix: ".min"
        } ) )
        .pipe( livereload() )
        .pipe( gulp.dest( 'dist' ) );
};

// Watch for changes
gulp.watch( 'js/*.js', [ 'js' ] ).on( "change", compileJS );

上面的答案似乎有些不完整，对我来说有点不清楚，希望这对其他寻找基本例子的人都有帮助。

Answer 7

在任务或回调中，您将拥有一个事件参数，该参数具有type属性，该参数将告诉您文件是否已添加，删除或更改。最好的办法是在有条件的情况下利用它。

gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};