我可以在gulp-watch中使用gulp-imagemin吗? [英] Can I use gulp-imagemin with gulp-watch?

问题描述

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

Can I use gulp-imagemin plugin with gulp-watch? So, I need to optimize images as soon as they are put into the folder.

这是我gulpfile.js的一部分:

Here is a part of my 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'));
});

推荐答案

在您的监视任务中，您正在监视'dist/images/'中的图像更改. 您应该将其更改为**'src/images/*'

in your watch task, you're watching image changes in 'dist/images/'.. you should change that to **'src/images/*'

在图像任务中，您也只在图像文件夹中直接观看图像(非递归).我建议听'src/images/'**

Also in your image task, you're watching only for images directly in the images folder (non recursive). I'd recomment to listen to 'src/images/'**

您的新gulpfile如下所示:

Your new gulpfile will look like:

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'));
});

希望有帮助；-)

这篇关于我可以在gulp-watch中使用gulp-imagemin吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！