Web_Designer_UK__May_2018

Developer tutorials
Intoday’swebdevelopmentworld,buildinga
modern,complexwebsitewhichsupportsa
variety of devices, both old and new, often
constitutes a lot of work. Much of this work
involves small, repeated tasks such as minifying
JavaScript, optimising images, or compiling SASS.
Whilethesetypesoftasksare useful, they also have to
be performed again and again every time the code is
changed. Understandably, this quickly grows repetitive,
and eventually, it can be tempting to just ditch them
altogether and spare yourself the headaches.
Thankfully, this is an issue we can solve. The solution
comes in the form of Gulp, a popular task runner which
enablesustoautomatethesetypesofmundane,timeconsuming
tasks through the use of Node.js streams,
leaving us free to focus on the important stuff.
In this tutorial, we’re going to create a basic build
system using Gulp, which compiles and optimises a small
projectanditsassets.Togetstarted,downloadthe
project files from Filesilo and open ‘website-template’ in
your favourite text editor. Then in Terminal, CD into
‘website-template’ and run ‘npm install’ to install the initial
project dependencies. Let’s begin.
1. Install Gulp
WefirstneedtoinstallGulpasaprojectdependency,and
then its command line interface (gulp-cli), by running the
commands below in Terminal. The latter will enable
Terminal to recognise any commands beginning with
‘gulp’, making it possible for us to actually run the tasks
we’ll be building in this tutorial.
npm install gulp-cli -g
npm install gulp -D
2. Create gulpfile.js
Gulp searches for tasks in a JavaScript file called ‘gulpfile.
js’. Let’s create one in the ‘website-template’ directory, and
then in it, copy the contents of ‘support-files/step-2.txt’
from the Filesilo package. This gives us a basic structure
so we can organise our code.
Thefirstthingweneedtodointhegulpfileisimport
Gulp itself as a dependency. This can be done by adding
the code below under the “Set Dependencies” header.
We’lluseanES6constdeclarationforthisandother
imports since we won’t be needing to reassign them.
const gulp = require(‘gulp’);
3. Project directory structure
When building a gulpfile, it’s worth remembering that
we may want to reuse it in future projects. These
projects may all have different directory structures,
whichmeanswewouldthenhavetogothrougheach
Gulp task and edit the paths accordingly. Let’s spare
our future-selves this inconvenience and declare our
directory structure in reusable variables which can
be easily changed. Add the declarations below under
the Options header.
const dev = ‘dev’;
const dist = ‘dist’;
const htmlDev = `${dev}/html`;
const htmlDist = dist;
const imgDev = `${dev}/img`;
const imgDist = `${dist}/img`;
const sassDev = `${dev}/sass`;
const sassDist = `${dist}/css`;
const jsDev = `${dev}/js`;
const jsDist = `${dist}/js`;
const dataDev = `${dev}/data`;
4. Minify variable
Next, again under the Options header, create a new
variable called ‘minify’ and set its value to ‘true’. This will
be used by some Gulp tasks to tell them if they should
minify the compiled code.
What minification does is remove all unnecessary
characters such as whitespace and line breaks from the
code without changing any of its functionality. This in
turn, reduces its filesize, making it load a little faster in
our end user’s browser.
const minify = true;
5. IF statements and file renaming
By having a minify boolean in our build system which can
be changed, we thus have to account for two differing
scenarios in our Gulp tasks: One where we want Gulp to
minify our code; and one where we don’t.
To help us define this logic, we will install two new
dependencies. The first is called gulp-if, and enables us
to integrate simple ternary operators into our Gulp
streams. The second is called gulp-rename, and simply
enables us to rename files. Run the command below in
Terminal to install these:
npm install gulp-if gulp-rename -D
Then import them into our gulpfile by adding this code
under the Set Dependencies header:
const rename = require(‘gulp-rename’);
const gulpif = require(‘gulp-if’);
6. Creating our first Gulp task
As our Gulp tasks run, files will be taken from the
specified ‘dev’ directory, processed, and then deposited
into the specified ‘dist’ directory. To make sure no leftover
files from previous builds can break things, we should
delete any existing ‘dist’ directory first. To do this, we’ll
build our very first Gulp task. We’ll require another
dependency called ‘del’, which can be installed using
the command below.
npm install del -D
Then add it to our list of dependency imports.
const del = require(‘del’);
Now, beneath the task’s header, let’s use the ‘gulp’ object
we defined back in Step 2 and call its ‘task()’ method. This
It’s just JavaScript
Remember, Gulp is running on JavaScript, so we
can use all the usual suspects like conditional
statements and loops to enhance our tasks. A
very simple example is using ‘console.log’ to
print feedback, but we’ll also be using more
complex ‘map’ functions soon enough.
Left
If you’d like to learn more about Gulp, you can visit its
homepage at www.gulpjs.com.
Top
With ‘gulp-cli’ installed, you can also type ‘gulp --help’ in
Terminal to see what other commands are available to you.
tutorial _________________________________________________ 81