npm install
- install project dependencies
npx gulp dev
- run development server, images optimization
npx gulp prod
- builds production ready js, css, html (with critical css) into /dist folder
src/resources/img/base64 - folder for builtIn base64 images directly in scss, example:
background-image: #{url64('src/resources/img/base64/quote.png')};
src/resources/sprite - folder with svg-sprite images (dist/resources/sprite.svg), to inject sprite into page add next element:
<img src="resources/sprite.svg" class="svg_injectable" style="display: none" alt="">
In this project use picture tags with .webp first priority images. For images in css use feature detection class 'webp'/'no-webp'
webpack.configES5.babel.js - bundles index.js with polyfills webpack.configES5.babel.js - for index.mjs for modern browsers, without polyfills (needs server setup)