Question

我正在使用gulp和gulp-imagemin进行一些图片优化工作。我设置gulp watch以便在我：

后注意更改

将新图像添加到图像源文件夹
删除图像源文件夹中的图像

到目前为止，第一个工作得很好，当添加新图像时，gulp运行任务并压缩新图像;但是，当我删除图像时，gulp似乎什么也没做。我在这里错过了插件或设置吗？

请参阅下面的gulpfile：

// gulpfile.js
var gulp = require('gulp');
var newer = require('gulp-newer');
var imagemin = require('gulp-imagemin');


var imgSrc = 'src/images/**';
var imgDest = 'images';

gulp.task('images', function() {
  return gulp.src(imgSrc)
  .pipe(newer(imgDest))
  .pipe(imagemin({
      optimizationLevel: 5,
      progressive: true,
      interlaced: true
    }))
  .pipe(gulp.dest(imgDest));
});

gulp.task('watch', function() {
  gulp.watch(imgSrc, ['images']);
});

gulp.task('default', ['images', 'watch']);

Answer 1

试试这个：

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

var imgSrc = 'src/images/**';
var imgDest = 'dist/images';

gulp.task('images', function() {
  return gulp.src(imgSrc)
  .pipe(imagemin({
      optimizationLevel: 5,
      progressive: true,
      interlaced: true
    }))
  .pipe(gulp.dest(imgDest));
});

gulp.task('clean-img', function (cb) {
 return del(imgDest,cb);
 });
gulp.task('watch', function() {
  gulp.watch(imgSrc, ['clean-img','images']);
});

gulp.task('default', ['clean-img','images', 'watch']);

这将清除你的dist文件夹并添加src文件夹中的图像。不幸的是，这种方法无法与gulp-newer一起使用，并会在每次更改时处理所有图片。

Gulp：如果源已被删除，如何让gulp自动删除输出文件？

1 个答案: