Могу ли я использовать gulp-imagemin с gulp-watch?

Question

Могу ли я использовать плагин gulp-imagemin с gulp-watch? Итак, мне нужно оптимизировать изображения, как только они помещены в папку.

Вот часть моего gulpfile.js:

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('default', function() {
  gulp.watch('dist/images/**', function(event) {
    gulp.run('images');
  });
});

// Image files

gulp.task('images', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

Answer 1

В вашей задаче наблюдения вы смотрите изменения изображения в 'dist / images /'.. вы должны изменить это на ** 'src / images / *'

Также в вашей задаче с изображением вы смотрите только изображения непосредственно в папке изображений (не рекурсивно). Я бы рекомендовал послушать 'src / images /' **

Ваш новый gulpfile будет выглядеть так:

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('default', function() {
  gulp.watch('src/images/**', function(event) {
    gulp.run('images');
  });
});

// Image files

gulp.task('images', function () {
    return gulp.src('src/images/**')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

Надеюсь, это поможет;-)