Блог

Я новичок в gulp. Пытаюсь оптимизировать изображения и преобразовать их в webp формат. Я смог добиться этого с помощью gulp-webp . Но, похоже, теперь в моей dist/img папке есть две версии изображений: оригинальная и webp-версия. Итак, как мне получить только webp, а не исходный файл внутри моей dist/img папки?

Вот как выглядят мои каталоги проектов:

 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'))
}
 

Сначала я бы сказал, что вам не следует удалять исходный файл, их можно сохранить. То, что вы хотите сделать, это использовать разные пункты назначения. Одно из которых должно быть развернуто (например, скомпилированное, уменьшенное и webp), а другое должно быть версией и, возможно, использоваться в ваших конвейерах cdci.

Но тогда, если вы действительно хотите удалить исходный файл, вы можете использовать gulp-clean, находясь в скрипте gulp.

Ваш сценарий очистки gulp может выглядеть так :

 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 ;