216 lines
7.8 KiB
JavaScript
216 lines
7.8 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getResizePatterns = exports.format = exports.getFormats = void 0;
|
|
const path = require("path");
|
|
const sharp = require("sharp");
|
|
const dir_1 = require("@plastichub/fs/dir");
|
|
const exists_1 = require("@plastichub/fs/exists");
|
|
const src_1 = require("../src");
|
|
const fg = require('fast-glob');
|
|
const getFormats = (product, folder) => {
|
|
return [{
|
|
src: `${product}/${folder}/*.jpg`,
|
|
dist: `${product}/${folder}/webp`,
|
|
format: 'webp',
|
|
}];
|
|
};
|
|
exports.getFormats = getFormats;
|
|
/*
|
|
const updateImages = async (root, product_root, content) => {
|
|
// Feed the content into JSDOM
|
|
const dom = new JSDOM(content);
|
|
const document = dom.window.document;
|
|
|
|
// Find the image elements via `querySelectorAll`, replace this selector with your own custom one
|
|
const imageElems = document.querySelectorAll('img');
|
|
|
|
// If there are no matching elements, just return the original content :)
|
|
|
|
if (imageElems.length === 0) {
|
|
return content;
|
|
}
|
|
|
|
for (const imgElem of imageElems) {
|
|
// Get the `src` of the image element
|
|
const imgSrc = imgElem.getAttribute('src');
|
|
|
|
// Only add this transform for internal images
|
|
if (imgSrc.startsWith('https') || imgSrc.startsWith('http')) {
|
|
let srcSet = [];
|
|
|
|
// Replace all of the image sources with a new one that matches the results of the Sharp build
|
|
|
|
|
|
if (imgSrc.indexOf('.png') !== -1) {
|
|
continue;
|
|
}
|
|
if (imgSrc.indexOf('.png') !== -1) {
|
|
continue;
|
|
}
|
|
|
|
const parsed = URI.parse(decodeURIComponent(imgSrc));
|
|
const pParsed = path.parse(parsed.path);
|
|
const imageName = (url) => {
|
|
return decodeURIComponent(pParsed.base);
|
|
}
|
|
// const parts = url.parse(imgSrc);
|
|
// Get the metadata for the file and add it as the `${width}w` needed in defining a `srcset` in HTML for `<img>`
|
|
const name = imageName(imgSrc);
|
|
const _path = decodeURIComponent(parsed.path).replace('//', '');
|
|
const imageSrcPath = `${root}/${_path}`;
|
|
if (!exists(imageSrcPath)) {
|
|
console.log('image doesnt exists : ' + imageSrcPath + ' \n\t' + imgSrc);
|
|
return;
|
|
}
|
|
const imageSrcPathParts = path.parse(imageSrcPath);
|
|
|
|
const imgSrc80 = imgSrc.replace(name, '80/' + name);
|
|
const imgSrc60 = imgSrc.replace(name, '60/' + name);
|
|
const imgSrc40 = imgSrc.replace(name, '40/' + name);
|
|
const imgSrc20 = imgSrc.replace(name, '20/' + name);
|
|
|
|
const _set = (res) => {
|
|
return path.resolve(imageSrcPathParts.dir + '/' + res + '/' + name);
|
|
}
|
|
|
|
if (!exists(_set(80))) {
|
|
console.error('doesnt exists ', _set(80), imgSrc);
|
|
continue;
|
|
}
|
|
|
|
if (!exists(_set(60))) {
|
|
console.error('doesnt exists ', _set(60), imgSrc);
|
|
continue;
|
|
}
|
|
if (!exists(_set(40))) {
|
|
console.error('doesnt exists ', _set(40), imgSrc);
|
|
continue;
|
|
}
|
|
if (!exists(_set(20))) {
|
|
console.error('doesnt exists ', _set(20), imgSrc);
|
|
continue;
|
|
}
|
|
|
|
const img80 = await sharp(_set(80));
|
|
const md80 = await img80.metadata();
|
|
srcSet.push(`${imgSrc80.replace(/\s/g,'%20')} ${md80.width}w`);
|
|
|
|
// Repeat
|
|
const img60 = await sharp(_set(60));
|
|
const md60 = await img60.metadata();
|
|
srcSet.push(`${imgSrc60.replace(/\s/g,'%20')} ${md60.width}w`);
|
|
|
|
// Repeat
|
|
const img40 = await sharp(_set(40));
|
|
const md40 = await img40.metadata();
|
|
srcSet.push(`${imgSrc40.replace(/\s/g,'%20')} ${md40.width}w`);
|
|
|
|
// Repeat
|
|
const img20 = await sharp(_set(20));
|
|
const md20 = await img20.metadata();
|
|
srcSet.push(`${imgSrc20.replace(/\s/g,'%20')} ${md20.width}w`);
|
|
|
|
// Join the `srcset` into a string. that can be added to the `<img>` tag
|
|
srcSet = srcSet.join(', ');
|
|
// Set the `srcset` attribute
|
|
imgElem.setAttribute('srcset', srcSet);
|
|
// Find the new `src` for the WebP image
|
|
|
|
let webpSrc = imgSrc.replace(name, 'webp/' + encodeURIComponent(name)).replace('.png', '.webp').replace('.jpg', '.webp');
|
|
|
|
// const webpSrc = imgSrc
|
|
// .replace('/images/', '/images/webp/')
|
|
// .replace('.png', '.webp');
|
|
// Create a separate `source` element for the WebP with feature detection via `type`
|
|
|
|
const webpElement = document.createElement('source');
|
|
webpElement.setAttribute('srcset', webpSrc);
|
|
webpElement.setAttribute('type', 'image/webp');
|
|
|
|
// Wrap the `<img>` and the `<source>` into one `<picture>` tag in order for it to work
|
|
|
|
const pictureElement = document.createElement('picture');
|
|
pictureElement.appendChild(webpElement);
|
|
pictureElement.appendChild(imgElem.cloneNode());
|
|
|
|
// Replace the `<img>` with the `<picture>`
|
|
|
|
imgElem.replaceWith(pictureElement);
|
|
}
|
|
}
|
|
return document.documentElement.outerHTML;
|
|
}
|
|
*/
|
|
const format = (formats) => {
|
|
return formats.forEach((format) => {
|
|
if (!(0, exists_1.sync)(format.dist)) {
|
|
(0, dir_1.sync)(format.dist);
|
|
}
|
|
// Find all files matching the glob patterns specified in `src`
|
|
let _files = fg.sync(format.src);
|
|
_files.forEach((file) => {
|
|
let filename = path.basename(file);
|
|
if ((0, exists_1.sync)(path.resolve(`${format.dist}/${filename.replace('jpg', format.format)}`))) {
|
|
return;
|
|
}
|
|
const image = sharp(file);
|
|
// Convert to WebP via Sharp's inferencing automatically of extensions
|
|
image
|
|
.toFile(`${format.dist}/${filename.replace('jpg', format.format)}`)
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
});
|
|
});
|
|
};
|
|
exports.format = format;
|
|
const getResizePatterns = (product, folder) => {
|
|
return [{
|
|
src: `${product}/${folder}/*.jpg`,
|
|
dist: `${product}/${folder}/80`,
|
|
percent: 80,
|
|
},
|
|
{
|
|
src: `${product}/${folder}/*.jpg`,
|
|
dist: `${product}/${folder}/60`,
|
|
percent: 60,
|
|
},
|
|
{
|
|
src: `${product}/${folder}/*.jpg`,
|
|
dist: `${product}/${folder}/40`,
|
|
percent: 40,
|
|
},
|
|
{
|
|
src: `${product}/${folder}/*.jpg`,
|
|
dist: `${product}/${folder}/20`,
|
|
percent: 20,
|
|
},
|
|
];
|
|
};
|
|
exports.getResizePatterns = getResizePatterns;
|
|
const resize = (patterns) => {
|
|
return patterns.forEach((resize) => {
|
|
if (!(0, exists_1.sync)(resize.dist)) {
|
|
(0, dir_1.sync)(resize.dist);
|
|
}
|
|
let _files = fg.sync(resize.src);
|
|
_files.forEach((file) => {
|
|
let filename = path.basename(file);
|
|
const image = sharp(file);
|
|
if ((0, exists_1.sync)(`${resize.dist}/${filename}`)) {
|
|
return;
|
|
}
|
|
image
|
|
.metadata()
|
|
.then((metadata) => {
|
|
return image
|
|
.resize(Math.round(metadata.width * (resize.percent / 100)))
|
|
.png()
|
|
.toFile(`${resize.dist}/${filename}`)
|
|
.catch(src_1.logger.error);
|
|
})
|
|
.catch(src_1.logger.error);
|
|
});
|
|
});
|
|
};
|
|
//# sourceMappingURL=library-images.js.map
|