[英]A better way to round a list of const variables in Javascript for gulpfile.js?
在我的 gulpfile.js 中,我希望能够根据使用 gulp 插件“gulp-sharp-responsive”的图像大小/压缩任务占用的屏幕的大致百分比来计算宽度。
例如,我的全屏图像尺寸之一是 1200。对于 1/4 宽度的图像,我希望它输出 300 像素的图像吗? 我想避免手动计算新宽度并能够将除数设置为命令行选项,所以这是我在本教程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.d 并在 arg 为空时提供了一个回退到 1(即 div = arg.d || 1)。 请注意,由于我主要是要全屏显示宽度为 576 像素及以下(移动屏幕)的特色图像,因此我不会将 xs 大小除以除数。 此外,由于 gulp-sharp-responsive 无法处理非整数宽度,我不得不用 round 函数对商进行四舍五入。 我的问题是,如何让我的代码减少冗余——例如,我不会为每个 const 变量重复 math.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;
结果:运行“gulp sharpImg”会导致定义默认的 const 宽度,而运行“gulp sharpImg --d 4”会导致图像为其默认宽度的 1/4。
您可以创建一个断点对象,一个执行除法重复 math.floor 的函数,然后使用一些现代 JS majicks,我认为您的代码可以更短,更少重复,但同样可读,重要的是,简单例如更改断点
function sharpImg() {
const BREAKPOINTS = {
xs: 576,
sm: 769,
md: 992,
lg: 1200,
xl: 1400,
xxl: 2048,
};
const onDiv = div => Object.entries(BREAKPOINTS).map(([bp, value]) => [Math.round(value / div), `-${bp}`]);
// creates an array of [[1, "-xs"], [2, "-sm"], ... ] (obviously the values are 576/div etc)
const div = arg.d || 1, bps = onDiv(div);
const jpegOptions = { quality: 50, progressive: true };
const webpOptions = { quality: 50 };
const avifOptions = { quality: 50 };
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
...bps.map(([width, suffix]) => ({ width, format: "jpeg", rename: { suffix }, jpegOptions })),
// webp
...bps.map(([width, suffix]) => ({ width, format: "webp", rename: { suffix }, webpOptions })),
// avif
...bps.map(([width, suffix]) => ({ width, format: "avif", rename: { suffix }, avifOptions })),
]
}))
.pipe(dest('_images/processed'))
}
输出format
以检查其是否正确的片段
function sharpImg() { const BREAKPOINTS = { xs: 576, sm: 769, md: 992, lg: 1200, xl: 1400, xxl: 2048, }; const onDiv = div => Object.entries(BREAKPOINTS).map(([bp, value]) => [Math.round(value / div), `-${bp}`]); // creates an array of [[1, "-xs"], [2, "-sm"], ... ] (obviously the values are 576/div etc) const div = 1, bps = onDiv(div); const jpegOptions = { quality: 50, progressive: true }; const webpOptions = { quality: 50 }; const avifOptions = { quality: 50 }; const formats = [ // jpeg ...bps.map(([width, suffix]) => ({ width, format: "jpeg", rename: { suffix }, jpegOptions })), // webp ...bps.map(([width, suffix]) => ({ width, format: "webp", rename: { suffix }, webpOptions })), // avif ...bps.map(([width, suffix]) => ({ width, format: "avif", rename: { suffix }, avifOptions })), ]; return formats; } console.log(JSON.stringify(sharpImg(), null, 4));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.