1 Clean dist folder

2 Auto connect fonts, convert and compress to woff2, woff

3 Compress and convert images to webp

4 Connect pictures from anywhere => @img/file.png

5 Auto add picture structure for webp and css webp

6 Add prefix for old browsers, clean css, group css media queries

7 Notify if error

8 Add version number for css and js files

9 Webpack for work with js

Nodejs

Gulp global cli

git clone https://github.com/oleh19127/LightStarter.git .; rm -rf trunk .gitignore readme.md .git .gitattributes

1 Clone or Download LightStarter from GitHub

2 Open terminal in a folder

3 Write in the terminal:

• Install Node Modules: npm i

• Run for development: npm run dev

• Run for production: npm run build

• Archive for production: npm run zip

• Main file located in html/index.html

• Layouts file located in html/layouts/

• Partials file located in html/partials/

• All custom scripts located in js/

• All custom styles located in scss/

• All images sources placed in images/

• All fonts sources placed in fonts/

• Main file located in index.html

• All custom scripts located in js/

• All custom styles located in css/

• All images sources placed in images/

• All fonts sources placed in fonts/

git clone

npm i

npm run dev

npm run build

npm run zip

GULP

• browser-sync

• del

• gulp-autoprefixer

• gulp-clean-css

• gulp-group-css-media-queries

• gulp-imagemin

• panini

• gulp-rename

• gulp-sass

• gulp-ttf2woff2

• gulp-webp

• gulp-webpcss

• fs

• gulp-fonter-2

• gulp-if

• gulp-newer

• gulp-notify

• gulp-plumber

• gulp-replace

• gulp-util

• gulp-version-number

• sass

• gulp-webp-html-nosvg

• gulp-zip

• webp-converter

• webpack

• webpack-stream