最近遇到一个问题,在做一个拷贝图片到dist目录的任务时,原图片文件结构也同时copy了过去,这不是我想要的。代码如下:
gulp.task('image', function () {
return gulp.src(['src/images/*','src/components/**/images/*'])
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant({ quality: '65-80', speed: 4 })]
}))
.pipe(gulp.dest('./dist/images/'));
});
如何将所有目录下的图片文件copy到dist/images/下,并且移除掉compoents/**/images/下文件的目录结构呢,找了很久,解决方案如下:
1. 安装gulp-rename插件:
npm install gulp-rename --save-dev
声明变量
var rename = require('gulp-rename');
2.将image 任务改为
gulp.task('image', function () {
return gulp.src(['src/images/*','src/components/**/images/*'])
.pipe(rename({dirname: ''}))
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant({ quality: '65-80', speed: 4 })]
}))
.pipe(gulp.dest('./dist/images/'));
});
注意多了一行
.pipe(rename({dirname: ''}))
enjoy.