Как запустить задачу только на измененном файле с gulp watch

у меня есть текущая задача gulp, которую я использую в gulpfile. Путь из конфигурации.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() будет работать только на этом изображении, а не на всех.

еще раз все работает отлично, но время выполнения действительно длинный.

спасибо.

50
gulp gulp-watch

7 ответов

"gulp-changed" - не лучшее решение для этого, потому что он смотрит только измененные файлы в папке" buildType".

попробовать gulp-кэшируется.

47

другой вариант-использовать залпом.смотрите на ("Изменить") вариант.

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());
  });
27

С залпом.смотреть вы можете только измененный файл, как это.

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

могу я предложить 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
}

enter image description here

2

да, 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());
});
1

в задаче или обратном вызове у вас будет параметр event, который имеет свойство type, которое сообщит вам, был ли файл добавлен, удален или изменен. Лучше всего использовать это в зависимости от вашей задачи.

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

вот реальный пример я использую все время, чтобы сделать это без каких-либо дополнительных пакетов. Я использую это для минимизации, переименования и компиляции.файл js в

0