gulp - 我可以将 gulp-imagemin 与 gulp-watch 一起使用吗？

Question

我可以在 gulp-watch 中使用 gulp-imagemin 插件吗？因此，我需要在将图像放入文件夹后立即对其进行优化。

这是我的 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'));
});

希望有帮助;-)