GulpJS Configuration

A powerful GulpJS config which compiles LESS/SCSS with live reload support, optimises images and can minify and inline CSS/JS code.


GulpJS Tasks

The GulpJS file has a series of tasks which are listed below:

  1. SCSS Compilation
  2. LESS Compilation
  3. Move CSS
  4. JS Minification
  5. Image Minification
  6. Browser Sync (Live Reload)
  7. Inline Source
  8. Watch Task (default)
  9. Build Task

SCSS Compilation

Compiles style.scss into src/style.css.


LESS Compilation

Compiles style.less into src/style.css.

Move CSS

Copies src/style.css into the dist/ folder.


JS Minification

All JS code located within the /src/js/ is minified and compiled into the dist/ folder.


Image Minification

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 dist/ folder.


Browser Sync (Live Reload)

Automatically reloads the browser whenever a LESS/SCSS or HTML file is saved within the src/ folder.


Inline Source

A task which embeds all <script>, <link> and <img> code inline within a HTML document. Will only occur to elements which have the inline attribute applied.

Examples:

<link inline rel="stylesheet" href="style.css">
<script inline src="jquery.js">

The compiled HTML files with the embedded code are saved in the dist/ folder.


Watch Task (default)

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 src/ folder.

The default gulp task can be run in the root base folder using the following command:

gulp


Build Task

The build task runs the following tasks:

  1. Move CSS
  2. Image Minification
  3. JS minification
  4. Inline Source

The build task can be run in the root base folder using the following command:

gulp build

Once the build task is complete, the final application is located within the dist/ folder.


The HTML Template

Now that you have a great understanding of the GulpJS config, it's time to deep dive into the HTML Template.