Une meilleure façon d'arrondir une liste de variables const dans Javascript pour gulpfile.js?

Question

Dans mon gulpfile.js, je veux pouvoir calculer les largeurs en fonction du pourcentage approximatif de l'écran qu'elles occuperont pour une tâche de redimensionnement/compression d'image en utilisant le plugin gulp "gulp-sharp-responsive".

Par exemple, l'une de mes tailles pour une image en plein écran est de 1200. Pour les images qui ont 1/4 de cette largeur, je veux qu'elle produise une image de 300px ? Je voulais éviter de devoir calculer manuellement la nouvelle largeur et pouvoir définir le diviseur comme une option en ligne de commande, c'est pourquoi j'ai choisi l'approche suivante suite à ce tutoriel, https://www.sitepoint.com/pass-parameters-gulp-tasks/.

En haut de gulpfile.js, j'ai ajouté le code suivant :

// 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);

J'ai assigné div comme arg.d et fourni une alternative si arg est nul à 1 (c'est-à-dire, div = arg.d || 1). Remarquez, puisque je vais principalement afficher les images en vedette en plein écran à des largeurs de 576px et moins (écrans mobiles), je ne divise pas la taille xs par un diviseur. Également, comme gulp-sharp-responsive ne peut pas traiter les largeurs non entières, j'ai dû arrondir le quotient avec la fonction arrondi. Ma question est, comment pourrais-je rendre mon code moins redondant-- par exemple, pour ne pas répéter math.round() pour chaque constante. Si vous avez des suggestions pour rendre mon code plus concis, veuillez me le faire savoir, je suis seulement un débutant. Merci !

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

tâche d'exportation :

exports.sharpImg = sharpImg;

Le résultat : En exécutant "gulp sharpImg", on obtient les largeurs par défaut définies, tandis qu'en exécutant "gulp sharpImg --d 4", on obtient des images à 1/4 de leur largeur par défaut.

Answer 1

Vous pourriez créer un objet breakpoints, une fonction pour effectuer la division math.floor répétitive, puis avec quelques tours de magie JS modernes, je pense que votre code peut être beaucoup plus court, moins répétitif, mais tout aussi lisible et, surtout, facile à modifier les breakpoints par exemple

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}`]);
    // crée un tableau de [[1, "-xs"], [2, "-sm"], ... ] (évidemment les valeurs sont 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: suffix }, jpegOptions: jpegOptions })),
                // webp
                ...bps.map(([width, suffix]) => ({ width, format: "webp", rename: { suffix: suffix }, webpOptions: webpOptions })),
                // avif
                ...bps.map(([width, suffix]) => ({ width, format: "avif", rename: { suffix: suffix }, avifOptions: avifOptions })),
            ]
        }))
        .pipe(dest('_images/processed'))
}

Un extrait qui affiche format pour vérifier s'il est correct

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}`]);
    // crée un tableau de [[1, "-xs"], [2, "-sm"], ... ] (évidemment les valeurs sont 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: suffix }, jpegOptions: jpegOptions })),
        // webp
        ...bps.map(([width, suffix]) => ({ width, format: "webp", rename: { suffix: suffix }, webpOptions: webpOptions })),
        // avif
        ...bps.map(([width, suffix]) => ({ width, format: "avif", rename: { suffix: suffix }, avifOptions: avifOptions })),
    ];
    return formats;
}
console.log(JSON.stringify(sharpImg(), null, 4));