gulp 拷贝文件时如何移除文件目录结构

阅读更多

最近遇到一个问题，在做一个拷贝图片到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.