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

我有一个我现在在一个大文件中使用的gulp任务。 path来自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”不是这样做的最佳解决scheme，因为它只能在“buildType”文件夹中观看修改过的字段。

尝试吞噬 – caching 。

Answer 2

另一种select是使用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")); }); 

Answer 4

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

这将允许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

是的，吞咽改变确实如此：

 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

在任务或callback中，您将拥有一个事件参数，该参数具有一个types属性，它将告诉您文件是否被添加，删除或更改。 最好的办法就是在你的任务中有条件的使用它。

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