gulp 拷贝文件时如何移除文件目录结构-CSDN博客

本文链接：https://blog.csdn.net/sunxboy/article/details/84697119

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