如何通过Gulp在每个文件夹中创建子文件夹？

Question

美好的一天！

我想自动将图像转换为 webp 格式。为了避免手动或通过在线转换器进行操作，我决定使用 gulp 4 和 gulp-webp.

这是我项目中嵌套文件夹的结构：

我希望Gulp，当它找到图片时，在相同的嵌套级别创建一个名为“webp”的文件夹，并将转换后的图片放在该文件夹中。

我想要以下结果：

我的Gulpfile.js:

let gulp = require('gulp'),
    webp = require('gulp-webp');

gulp.task('webp', () => {
    // './dev/img/**/*.{png,gif,jpg}' - all files in img and all files in subfolders in img


    return gulp.src('./dev/img/**/*.{png,gif,jpg}')
        .pipe(webp())
        .pipe(gulp.dest(gulp.src)) //something like this, but it doesn't work

    }
);

Answer 1

这可以在 gulp-rename 的帮助下完成。

安装gulp-重命名运行:

npm i -D gulp-rename

然后在您的 gulpfile.js 中添加导入：

const rename = require('gulp-rename');

然后像这样更改您的流：

return gulp.src('./dev/img/**/*.{png,gif,jpg}')
    .pipe(webp())
    .pipe(rename({ prefix: 'webp/' }))
    .pipe(gulp.dest('./dev/img'));

prefix 选项在 dest 目标“./dev/img”之后的裸文件名前插入“webp/”。

如何通过Gulp在每个文件夹中创建子文件夹？

How can I create a subfolder in each folder through Gulp?

javascript

webp

gulp

gulp-4

gulpfile