gulp-changed / gulp-newer + gulp-rename 不起作用答案

【问题标题】：gulp-changed / gulp-newer + gulp-rename don't workgulp-changed / gulp-newer + gulp-rename 不起作用
【发布时间】：2015-11-02 20:04:40
【问题描述】：

我尝试绕过缩小、调整大小和重命名已处理的图像，添加“gulp-changed”对我没有任何改变；每次都处理所有文件。我尝试了“gulp-newer”，但仍然没有运气。

后来，我想通了——如果我省掉 gulp-rename，gulp-changed 就可以了。在任务中使用 gulp-rename - 它没有。但无论如何我都需要 gulp-rename...

var gulp        = require('gulp');
var changed     = require('gulp-changed');
var imagemin    = require('gulp-imagemin');
var pngquant    = require('imagemin-pngquant');
var imageResize = require('gulp-image-resize');
var rename      = require('gulp-rename');

var img_src = ['_img/**/*.jpg', '_img/**/*.png'];
var img_dest = '_site/img';

gulp.task('resize-xl', function () {
    return gulp.src(img_src)
    .pipe(changed(img_dest))
    .pipe(imageResize({
      width : 2048,
      crop : false,
      upscale : true,
      sharpen: false,
      quality: 1
    }))
    .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(rename(function (path) {
          path.basename += "-2048";
        }))
        .pipe(gulp.dest(img_dest));
});

【问题讨论】：

它只适用于 gulp 手表吗？如果是这样，也许这就是原因；我没有设置它。
我不确定我是否遗漏了什么，但resize-xl 任务只执行一次，对吗？ gulp-changed 如何知道您的文件夹的先前状态？

标签： gulp gulp-rename gulp-changed gulp-newer

【解决方案1】：

所有文件都被处理，因为gulp-changed（或gulp-newer）在您的任务中检查名称为gulp.src(img_src)的文件的更改。由于img_dest 目录中没有原始名称的文件，因此将对img_src 目录中的所有文件执行任务。

要解决此问题，您可以使用暂存目录来存放已修改的文件。例如：

1) 创建新目录，'_resize'。

2) 修改 gulpfile.js：

var img_resize = '_resize';

gulp.task( 'resize-xl', function () {
    return gulp.src( img_src )
       .pipe( changed( img_resize ) )

       // add here your image plugins: imageResize, imagemin, ..

       // save the modified files with original names on '_resize' dir
       .pipe( gulp.dest( img_resize ) )

       .pipe( rename( { suffix: '-2048' } ) )
       // save the modified files with new names on destanation dir
       .pipe( gulp.dest( img_dest ) );
} );

首次运行后，此任务将只处理新文件和更改文件

【讨论】：

【解决方案2】：

您还可以在管道 changed 插件之前重命名文件，以便插件获取具有新名称的源文件：

gulp.task( 'resize-xl', function () {
return gulp.src( img_src )
   // change name first
   .pipe( rename( { suffix: '-2048' } ) )
   .pipe( changed( img_dest ) )

   // add here your image plugins: imageResize, imagemin, ..

   .pipe( gulp.dest( img_dest ) );
} );

【讨论】：

不错！我喜欢这个。