Web_Designer_UK__May_2018

Developer tutorials
Automate your workflow with Gulp
The Gulp
ecosystem
At the time of writing, there are
3,399 plugins listed at gulpjs.
com/plugins. This means
there’s an incredible amount
of potential automation we can
apply to our workflows. Here’s
abriefoverviewofsomeofour
favourite plugins not featured
in this tutorial:
‘gulp-notify’ enables you
to send OS notifications from
Gulp tasks. Possible uses
include notifying when a build is
complete,orifthere’sanerror.
‘gulp-plumber’ changes
Gulp error handling so that
when things break (such as
SASS not compiling) the task
won’t quit prematurely.
‘gulp-stylelint’ and ‘gulpeslint’
bring these popular
frameworks to Gulp, enabling
you to automatically lint your
SASS and JavaScript on build.
‘gulp-git’ enables you to
run Git commands from a Gulp
task, so for example, when you
complete a build, you could
choose to commit it also.
npm install browserify vinyl-source-stream
glob gulp-streamify gulp-uglify babelpreset-es2015
babelify babel-core -D
Then add these to our list of dependency imports.
const browserify = require(‘browserify’);
const source = require(‘vinyl-sourcestream’);
const glob = require(‘glob’);
const streamify = require(‘gulp-streamify’);
const uglify = require(‘gulp-uglify’);
13. Bundling JavaScript – part 2
Next, create a new Gulp task called ‘js’ and within it, use
the glob plugin to grab all the JavaScript files in our root
‘jsDev’ directory and return them in an array. We’ll then
loop through this using a map function, enabling us to
process each JavaScript file individually.
gulp.task(‘js’, function() {
console.log(‘Bundling JavaScript ’);
var files = glob.sync(`${jsDev}/*.js`);
files.map(function(file) {
});
});
14. Bundling JavaScript – part 3
Within the map function, the ‘file’ variable references a
string containing the full path of the current file (For
example ‘/dev/js/main.js’). If we want to rename a minified
‘main.js’ in a later step to ‘main.min.js’ like within the SASS
task, we will need its base filename ‘main’. Let’s filter out
the path information which isn’t required, by adding the
snippet below to the map function.
const filename = file.replace(`${jsDev}/`,
‘’)
.replace(‘.js’, ‘’);
15. BundlingJavaScript–part4
Next,let’ssendthefiletoBrowserifythroughthe
transformfunctionsoitcanbebundledanditsES6
transpiled. The vinyl-source-stream dependency is
thenusedtosendthefilebackusingGulpsoitcanbe
renamed if minify is ‘true’. Finally, if minify is true, we run
thebundledfilethroughuglifytominifyitandthensend
it to the ‘jsDist’ directory.
return browserify({entries: file})
.transform(‘babelify’, {presets:
[‘es2015’]})
.bundle()
.pipe(source(file))
.pipe(gulpif(minify, rename({
dirname: ‘’,
basename: filename,
suffix: ‘.min’,
extname: ‘.js’
}), rename({
dirname: ‘’,
basename: filename,
extname: ‘.js’
})))
.pipe(gulpif(minify, streamify(uglify())))
.pipe(gulp.dest(jsDist));
16. Setting up Nunjucks
One thing possible to automate with Gulp is static site
generation. In this project, a templating language called
Nunjucks will be used to generate HTML files from
templates using car data in a JSON file. We can see these
Nunjucks templates for ourselves at ‘dev/html’. Install
‘gulp-nunjucks’ in the usual way and then include it as a
dependency called ‘nunjucks’ in gulpfile. Next, create a
new task called ‘makes-list’.
gulp.task(‘makes-list’, function() {
console.log(‘Generating homepage ’);
});
17. Import JSON data
In the task, the first thing we’ll be doing is importing the
car data, which will feed into the static site generation.
However, before we do even that, we first need to delete
any leftover cache from previous builds to make sure the
car data we’re using is always up to date. If we don’t, when
we make changes to the car data in future, the out-of-date
cached version may be used by the task instead.
delete require.cache[require.
resolve(`./${dataDev}/cars.json`)];
let config = require(`./${dataDev}/cars.
json`);
18. Inject data into a single page
Using Nunjucks, we’ll make the car data available to the
‘index.html’ template, enabling it to display a list of car
makes once compiled. With the ‘src()’ method, grab the
‘index.html’ template and then pipe it to Nunjucks. Next,
we’ll use Nunjucks’ ‘compile()’ method to inject car data
from the JSON we’ve imported to the template and then
render it. Finally we’ll send the compiled HTML to the
‘htmlDist’ directory.
return gulp.src(`${htmlDev}/index.html`)
.pipe(nunjucks.compile({
date: config[‘date’],
makes: config[‘makes’]
}))
.pipe(gulp.dest(htmlDist));
19. Render new pages – part 1
It’s also possible in Gulp to generate lots of HTML files
tutorial _________________________________________________83