61

我有我在 gulpfile 中使用的当前 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()则只会在此图像上运行，而不是在所有图像上运行。

再一次一切都很好，但运行时间真的很长。

谢谢。

4

9 回答 9

58

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

尝试gulp-cached代替。

于 2014-06-03T08:31:43.923 回答
37

另一种选择是使用 gulp.watch on("change") 选项。

gulp
  .watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"])
  .on("change", function(path) {
      gulp
        .src(path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });
于 2015-08-17T11:54:11.817 回答
20

不需要插件，这可以通过 gulp.watch 来实现。

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

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

编辑：对于 Gulp v4.0.2 - 现在已修复：

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

var watcher = watch(["src/**/*"]);
watcher.on('change', function(fileName){
    return src(fileName, {base: 'src/'})
        .pipe(dest('dest'));
});
于 2017-03-20T17:31:25.957 回答
7

自 4.0 版起，Gulp 原生支持增量构建，无需任何插件。这是从项目 README中获取的示例：

const paths = {
  ...
  images: {
    src: 'src/images/**/*.{jpg,jpeg,png}',
    dest: 'build/img/'
  }
}

function images() {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin())
    .pipe(gulp.dest(paths.images.dest));
}

function watch() {
  gulp.watch(paths.images.src, images);
}
于 2020-05-25T14:25:00.627 回答
3

我可以建议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
}

在此处输入图像描述

于 2015-03-20T07:06:33.873 回答
1

是的，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());
});
于 2014-05-27T19:33:15.490 回答
1

这是一个真实世界的示例，我一直使用它来执行此操作，而无需任何其他软件包。我使用它来缩小、重命名和编译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 );

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

于 2018-04-25T17:46:21.077 回答
0

在任务或回调中，您将有一个事件参数，它有一个类型属性，它将告诉您文件是否被添加、删除或更改。最好的办法是根据你的任务来利用它。

gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};
于 2016-05-28T17:47:10.710 回答
0

定义主任务，使其接受.src()输入模式的参数。定义一个包装函数来传递任务的默认 src 值，以便您仍然可以直接调用它，如gulp images：

const imageFilePattern = '/src/path/to/input';

function images() {
  getImagesTask(imageFilePattern);
}

function imagesTask(src) {
  return gulp.src(src)
    .pipe(imagemin())
    .pipe(gulp.dest('dest'));
}

现在您可以轻松地将监视任务定义为仅处理更改的文件：

function watch() {
  return gulp.watch(imageFilePattern).on("change", imagesTask);
}
于 2020-05-22T22:41:03.607 回答