A powerful GulpJS config which compiles SCSS with live reload support, optimises images and can minify and inline CSS/JS code.
The GulpJS file has a series of tasks which are listed below:
- SCSS Compilation
- Styleguide Compilation
- JS Minification
- Image Minification
- Browser Sync (Live Reload)
- Inline Source
- Watch Task (default)
- Build Task
All JS code located within the
/src/js/ is minified and compiled into the
Compresses png, jpg, gif and svg files without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles to save bytes and make images load much faster.
The optimised images are compiled within the
Browser Sync (Live Reload)
Automatically reloads the browser whenever a SCSS or HTML file is saved within the
A task which embeds all
<img> code inline within a HTML document. Will only occur to elements which have the
inline attribute applied.
<link inline rel="stylesheet" href="style.css">
<script inline src="jquery.js">
The compiled HTML files with the embedded code are saved in the
Watch Task (default)
When gulp is run, the
watch task (default) will automatically compile SCSS code on save and run Browser Sync (live reload) when any HTML or SCSS code is saved within the
The default gulp task can be run in the root base folder using the following command:
When the clean task is run, it will delete the
The clean gulp task can be run in the root base folder using the following command:
npm run clean
The HTML Template
Now that you have a great understanding of the GulpJS config, it's time to deep dive into the SCSS/LESS/CSS.