GulpJS Configuration

A powerful GulpJS config which compiles 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. Styleguide Compilation
  3. JS Minification
  4. Image Minification
  5. Browser Sync (Live Reload)
  6. Inline Source
  7. Watch Task (default)
  8. Build Task

SCSS Compilation

Compiles style.scss into src/css/style.css.

Styleguide Compilation

Compiles styleguide.scss into src/css/styleguide.css.

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 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 SCSS code on save and run Browser Sync (live reload) when any HTML or 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

Clean Task

When the clean task is run, it will delete the dist/ folder.

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

gulp clean

Build Task

The build task runs the following tasks:

  1. SCSS Compilation
  2. Styleguide Compilation
  3. Image Minification
  4. JS Minification
  5. 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.