A powerful GulpJS config which compiles LESS/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:
src/style.css into the
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
Automatically reloads the browser whenever a LESS/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
When gulp is run, the
watch task (default) will automatically compile LESS/SCSS code on save and run Browser Sync (live reload) when any HTML or LESS/SCSS code is saved within the
The default gulp task can be run in the root base folder using the following command:
The build task runs the following tasks:
The build task can be run in the root base folder using the following command:
Once the build task is complete, the final application is located within the
Now that you have a great understanding of the GulpJS config, it's time to deep dive into the HTML Template.