Developer tutorials Automate your workflow with Gulp Learn how to remove the nuisance of repetitive and mundane tasks with the help of Gulp, a Node.js task runner DOWNLOAD TUTORIAL FILES 80 _________________________________________________tutorial www.filesilo.co.uk/webdesigner
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
Change language