Gulp: Convert cloned images to webp, but keep the original file extension

Question

I have the following gulp worklow: I clone jpg and png images of a source folder, convert the cloned images to webp, and copy both (original and webp) to the dest folder.

So after I let it run, the dest folder contains the following files:

example.jpg
example.webp
foo.png
foo.webp

So far, so good. But what I would like to achieve ist that the original file extension (.jpg or.png) should be maintained in the webp version, and the.webp extension should simply be appended. So the dest folder should look like this:

example.jpg
example.jpg.webp
foo.png
foo.png.webp

How would that be possible in the following worklow?

import * as clone from "gulp-clone";
import * as size from "gulp-size";
import * as webp from "gulp-webp";

function copyImages() {
    var sink = clone.sink();  // init sink

    return src(conf.images.src + '**/*')
        .pipe(sink)        // clone image
        .pipe(webp())      // convert cloned image to webp
        .pipe(sink.tap())  // restore original image
        .pipe(dest(conf.images.dest))
        .pipe(size({
            title: 'images'
        }));
}

Answer 1

It's probably not the most efficient solution, but it works:

import * as clone from "gulp-clone";
import * as webp from "gulp-webp";
import * as revertPath from "gulp-revert-path";
import * as rename from "gulp-rename";
import * as size from "gulp-size";

function copyImages() {
    var sink = clone.sink();  // init sink

    return src(conf.images.src + '**/*')
        .pipe(sink)        // clone image
        .pipe(webp())      // convert cloned image to webp
        .pipe(revertPath())
        .pipe(rename(function (path) {
            path.extname = path.extname + '.webp';
        }))
        .pipe(sink.tap())  // restore original image
        .pipe(dest(conf.images.dest))
        .pipe(size({
            title: 'images'
        }));
}