gulp_img_transform_to_picture/index.js

Replace the <img> to <picture> within HTML files, support Webp and Avif formats.

import PluginError from"plugin-error";import through from"through2";var Gulp_img_transform_to_picture;!function(e){e.Config=class{display_contents;quotes;extensions;ignore_attr;logger;constructor({extensions:e,display_contents:t,quotes:o,ignore_attr:r,logger:n}){this.quotes=void 0!==o?o:"double",this.display_contents=void 0!==t&&t,this.ignore_attr=void 0!==r?r:"data-ignore",this.logger=void 0!==n&&n,void 0!==e?(e.png=void 0!==e.png?e.png:"webp",e.jpg=void 0===e.jpg||e.jpg,e.jpeg=void 0===e.jpeg||e.jpeg,this.extensions=e):this.extensions={png:"webp",jpg:!0,jpeg:!0}}}}(Gulp_img_transform_to_picture||(Gulp_img_transform_to_picture={}));export default function gulp_img_transform_to_picture(e){const t={single:"'",double:'"'}[(e=void 0!==e?new Gulp_img_transform_to_picture.Config(e):new Gulp_img_transform_to_picture.Config({})).quotes],o=new RegExp(`<img[^>]*?src(\\s+)?=(\\s+)?${t}?([^'"\` >]+?)[ ${t}][^>]*?>`,"g"),r=new RegExp(`(?<=src(\\s+)?=(\\s+)?${t})(\\w|\\.|/|-|_)+(?=[ ${t}])`,"g");return through.obj((function(t,n,i){try{if(null==t.contents)return void this.emit("error",new PluginError("gulp_img_transform_to_picture","File not found, cannot extract data."));let n,i=[];e.logger&&(n=void 0!==t.history&&null!==t.history?t.history[0].split("\\").pop():"unrecognized");let s=t.contents.toString(),g=s.match(o);if(g&&g.map((t=>{if(t.includes(e.ignore_attr))return;let o=t.match(r)[0].split(".");if(o&&o.length>=2){let r=o.pop();if(Object.keys(e.extensions).includes(r)){let n="";n+=!1===e.display_contents?"<picture>":'<picture style="display: contents">',!0===e.extensions[r]?n+=`<source srcset="${o}.avif" type="image/avif"><source srcset="${o}.webp" type="image/webp">`:n+=`<source srcset="${o}.${e.extensions[r]}" type="image/${e.extensions[r]}">`,n+=`${t}</picture>`,s=s.replace(t,n),"stats"!==e.logger&&!0!==e.logger||i.push(t)}else"error"!==e.logger&&!0!==e.logger||console.log({error:{filename:n,message:"[WARNING] File extension doesn't support, please define in within Config.",extension:r}})}else"error"!==e.logger&&!0!==e.logger||console.log({error:{filename:n,message:"[WARNING] Cannot extract image info.",item:t}})})),t.contents=new Buffer.from(s),this.push(t),"stats"===e.logger||!0===e.logger){let e=`\nGulp_img_transform_to_picture logger:\nFilename: ${n},\nTransformed items: [\n`;i.map((t=>{e+=`\t${t}\n`})),e+="]\n",console.log(e)}}catch(e){this.emit("error",new PluginError("gulp_img_transform_to_picture",e))}i()}))}