在我的大肚子里.js,我希望能够根据使用gulp插件"gulp sharp responsive"的图像大小调整/压缩任务所占屏幕的近似百分比来计算宽度.
例如,我的一个全屏图像尺寸是1200.对于1/4宽度的图像,我希望它输出一个300px的图像?我希望避免手动计算新的宽度,并能够将除数设置为命令行选项,因此这是我在本教程之后提出的解决方案,https://www.sitepoint.com/pass-parameters-gulp-tasks/.
在gulpfile的顶部.js,我添加了以下代码:
// fetch command line arguments
const arg = (argList => {
let arg = {}, a, opt, thisOpt, curOpt;
for (a = 0; a < argList.length; a++) {
thisOpt = argList[a].trim();
opt = thisOpt.replace(/^\-+/, '');
if (opt === thisOpt) {
// argument value
if (curOpt) arg[curOpt] = opt;
curOpt = null;
}
else {
// argument name
curOpt = opt;
arg[curOpt] = true;
}
}
return arg;
})(process.argv);
我将div指定为arg.如果arg为null到1(即div=arg.d | | 1),则提供回退.注意,由于我主要是在全屏幕上以576px及以下的宽度(移动屏幕)显示特色图像,所以我没有用除数除以xs大小.此外,由于gulp sharp responsive无法处理非整数宽度,因此我必须使用舍入函数对商进行舍入.我的问题是,我该如何减少代码的冗余——例如,这样我就不会重复数学了.每个常量变量的round().如果你有任何建议,使我的代码更简洁,请让我知道,我只是一个初学者.谢谢
function sharpImg() {
const div = arg.d || 1, xs = (Math.round(576 / div)), sm = (Math.round(769 / div)), md = (Math.round(992 / div)), lg = (Math.round(1200 / div)), xl = (Math.round(1400 / div)), xxl = (Math.round(2048 / div));
return src(['_images/original/process/**/*.{jpeg,jpg,png,tiff,webp}', '!_images/original/raw/**'])
.pipe($.rename(function (path) {
path.dirname += "/" + path.basename;
}))
.pipe($.sharpResponsive({
formats: [
// jpeg
{ width: xs, format: "jpeg", rename: { suffix: "-xs" }, jpegOptions: { quality: 50, progressive: true } },
{ width: sm, format: "jpeg", rename: { suffix: "-sm" }, jpegOptions: { quality: 50, progressive: true } },
{ width: md, format: "jpeg", rename: { suffix: "-md" }, jpegOptions: { quality: 50, progressive: true } },
{ width: lg, format: "jpeg", rename: { suffix: "-lg" }, jpegOptions: { quality: 50, progressive: true } },
{ width: xl, format: "jpeg", rename: { suffix: "-xl" }, jpegOptions: { quality: 50, progressive: true } },
{ width: xxl, format: "jpeg", rename: { suffix: "-xxl" }, jpegOptions: { quality: 50, progressive: true } },
// webp
{ width: xs, format: "webp", rename: { suffix: "-xs" }, webpOptions: { quality: 50 } },
{ width: sm, format: "webp", rename: { suffix: "-sm" }, webpOptions: { quality: 50 } },
{ width: md, format: "webp", rename: { suffix: "-md" }, webpOptions: { quality: 50 } },
{ width: lg, format: "webp", rename: { suffix: "-lg" }, webpOptions: { quality: 50 } },
{ width: xl, format: "webp", rename: { suffix: "-xl" }, webpOptions: { quality: 50 } },
{ width: xxl, format: "webp", rename: { suffix: "-xxl" }, webpOptions: { quality: 50 } },
// avif
{ width: xs, format: "avif", rename: { suffix: "-xs" }, avifOptions: { quality: 50 } },
{ width: sm, format: "avif", rename: { suffix: "-sm" }, avifOptions: { quality: 50 } },
{ width: md, format: "avif", rename: { suffix: "-md" }, avifOptions: { quality: 50 } },
{ width: lg, format: "avif", rename: { suffix: "-lg" }, avifOptions: { quality: 50 } },
{ width: xl, format: "avif", rename: { suffix: "-xl" }, avifOptions: { quality: 50 } },
{ width: xxl, format: "avif", rename: { suffix: "-xxl" }, avifOptions: { quality: 50 } },
]
}))
.pipe(dest('_images/processed'))
}
导出任务:
exports.sharpImg = sharpImg;
结果: