Я делаю так... Может Вы посчитаете это полезным )
const newer = require("gulp-newer"), webp = require("gulp-webp"), rename = require("gulp-rename");
Задаю желаемые размеры изображений
const sizes = [ 0, // full size 100, // thumbnail 320, // small 640, // medium 960, // large 1200 // big ]
и пути (для "красоты")
const images = { "in": source + "assets/images/**/*.*", "out": target + "assets/images/" }
Собственно, задача
gulp.task("images", function(cb) { sizes.forEach(function(sizes){ gulp.src(images.in) .pipe(newer(images.out)) .pipe(webp( {resize: {width: sizes, height: 0}} )) .pipe(rename(function (path) { path.basename = ${path.basename}@${sizes}w; })) .pipe(gulp.dest(images.out)); }); cb(); });
И отслеживание изменений
gulp.watch(images.in, gulp.series("images"));
При копировании изображений в формате jpg/png в каталог-источник на выходе получаем набор изображений веппи с именами вида исходное_название@1200.webp, исходное_название@960.webp и т.д.
P.S. Не заметил, что "местный" редактор не принимает обратного апострофа. Извините.
Код, отвечающий за формирование имен новых изображений, должен обрамляться обратными апострофами: `${path.basename}@${sizes}w`
Я делаю так... Может Вы посчитаете это полезным )
const newer = require("gulp-newer"), webp = require("gulp-webp"), rename = require("gulp-rename");Задаю желаемые размеры изображений
const sizes = [ 0, // full size 100, // thumbnail 320, // small 640, // medium 960, // large 1200 // big ]и пути (для "красоты")
const images = { "in": source + "assets/images/**/*.*", "out": target + "assets/images/" }Собственно, задача
gulp.task("images", function(cb) { sizes.forEach(function(sizes){ gulp.src(images.in) .pipe(newer(images.out)) .pipe(webp( {resize: {width: sizes, height: 0}} )) .pipe(rename(function (path) { path.basename =${path.basename}@${sizes}w; })) .pipe(gulp.dest(images.out)); }); cb(); });И отслеживание изменений
gulp.watch(images.in, gulp.series("images"));При копировании изображений в формате jpg/png в каталог-источник на выходе получаем набор изображений веппи с именами вида исходное_название@1200.webp, исходное_название@960.webp и т.д.
P.S. Не заметил, что "местный" редактор не принимает обратного апострофа. Извините.
Код, отвечающий за формирование имен новых изображений, должен обрамляться обратными апострофами: `${path.basename}@${sizes}w`