我试图绕过缩小、调整大小和重命名已经处理过的图像,添加"gulp-changed"对我来说没有任何改变;所有的文件都被处理了。我试着"大口喝新的",但仍然没有成功。
后来,我发现了——如果我不需要重新命名,那么更改gullow就可以了。任务中使用了gullow重命名,但没有。但我还是需要重新命名。。。
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.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 ) );
} );
所有文件都会被处理,因为任务中的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 ) );
} );
第一次运行后,此任务将只处理新的和更改的文件