it-swarm.com.ru

Как запустить задачу ТОЛЬКО на измененном файле с Gulp watch

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

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

Благодарю.

50
soenguy

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

Попробуйте gulp-cached вместо этого.

48
nktssh

Другой вариант - использовать опцию 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(file) {
      gulp
        .src(file.path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });
27
Brad Berger

С gulp.watch вы можете настроить таргетинг только на измененный файл следующим образом.

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

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

Да, gulp-change делает именно это:

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
urban_raccoons

Вот реальный пример, который я использую все время, чтобы сделать это без каких-либо дополнительных пакетов. Я использую это для минимизации, переименования и компиляции любого файла .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 );

Приведенные выше ответы казались мне частично неполными и немного неясными для меня, надеюсь, это поможет всем, кто ищет простой пример.

0
Kevin Leary

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

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