如何在将常规(jpg，png)图像转换为网络图片后删除它们

Question

我刚学会吞咽。尝试优化图像并将其转换为webp格式。我能够使用gulp-webp实现这一点。但现在我的dist/img文件夹中似乎有两个版本的图像——一个是原始图像，另一个是webp版本。那么，如何在dist/img文件夹中只获取webp而不获取原始webp呢？

以下是我的项目目录的样子：

project
|-dist
|-css
|-img
|-js
|-src
|-css
|-img
|-js

gulp.js
...

这里是webp转换函数：

function webpImage() {
return src('dist/img/**/*.{jpg,png}')
.pipe(imagewebp())
.pipe(dest('dist/img'))
}

Answer 1

我首先要说的是，您不应该删除源文件，保留它们是可以的。你想做的是去不同的目的地。其中一个应该被部署(例如编译的、minimied的和webp(，另一个应该是版本，并可能在您的cdci管道中使用。

但是，如果您真的想删除源文件，可以在使用gullow脚本的同时使用gullow-clean。

你一饮而尽的干净脚本可能是这样的：

const { src, task } = require('gulp');
const clean = require("gulp-clean");
const logger = require('node-color-log');
function cleanImagesTask() {
const root = "path/to/images/you/want/to/delete";
logger.color('yellow').log(`Clean images`);
return src(root,{allowEmpty: true},{read: false}).pipe(clean({force:true}));
};
const cleanImagesFolder = task('clean:images', cleanImagesTask);
exports.cleanImagesFolder = cleanImagesFolder;

如果你想部署在不同的dest，可以使用类似的东西：

const { src, dest, task } = require( 'gulp' );
const logger = require('node-color-log');
function copyImagesToDest(callback) {
const imagesSource = "path/to/your/images/**/*";
const imagesDestination = "path/to/destination/";
logger.color('green').log(`Copy images from ${artifactData} to: ${destination}`);
return src(imagesSource)
.pipe(dest(destination))
.on('end', function () { 
logger.color('green').log(`Copy to: ${destination}`);
callback(); 
});
};
const copyImages = task('copy:images', copyImagesToDest);
exports.copyImages = copyImages ;