Build Your First Website — Like A Programmer (Part 3.25)

This post will be short! It is a continuation of the ‘Build Your First Website’ set of tutorials I have been doing (Part 1 is here). In here we are going to write a gulpfile which will compress all of our stylesheet resources into one style.min.css. This article will give you a general idea of how a gulpfile is formatted and touch on its use in the development process.

Let’s get started by creating a branch to make these changes modular.

> git checkout develop
> git flow feature start gulp (Git Flow)
> git checkout -b feature/gulp (Without Git Flow)

Now create a file called ‘gulpfile.js’ in the root of your project directory. You would have installed gulp and some of the dependencies which we will be using earlier in this series so let’s just jump right into coding.

First, as with all Nodejs projects, let us require!

'use strict';
let gulp = require('gulp');
let path = require('path');
let concat = require('gulp-concat');

For this basic gulp intro we will only need the gulp package (obv!), the path package, and the gulp-concat package (its use will be more clear later).

Now let’s workout the point of gulp. It is a workflow tool, it is suppose to make our development process just that much simpler by automating some annoying and tedious parts of creating a complete software project. In our case we only want to include a single css file into our website instead of the many we have to include now. We shall start off by writing the skeleton of each gulp task.

Each task will be of the form:

gulp.task('name:of:the:task', () => { do the task });

We will be creating 4 tasks: clean, compress, relocate:images, default.

Let’s start with the clean task, we want this to remove all the old files from our distribution directory (the eventual output of our gulp tasks). This will require a package which we haven’t installed yet, so let’s go ahead and do that.

> npm install --save-dev del

The ‘del’ package lets us remove files and folders using a gulp task. Here is what the task is going to look like:

gulp.task('clean', () => 
require('del')([path.join(__dirname, 'public', 'dist', '*')])
);

As you can see when we do

> gulp clean

on the command line del removes all the files in the public/dist/ directory.

Next we want to actually populate the public/dist/ directory with our compressed css file. So let us create another gulp task to compress all our css files into one.

gulp.task('compress', ['clean'], () =>
gulp.src(path.join(__dirname, 'public', 'stylesheets', '*.css'))
.pipe(concat('style.min.css'))
.pipe(gulp.dest(path.join(__dirname, 'public', 'dist', 'css')))
);

This task touches on more of the gulp syntax: src, pipe, and dest. They are pretty self explanatory,

  • gulp.src tells gulp what to suck up into its pipes, in our case it’s a bunch of CSS files.
  • .pipe pushes whatever we used as the source and concatenates them all into one file (since they are already minified thanks to the :compressed option for compass [found in the config.rb file])
  • gulp.dest is the output destination for the result of the flow

Now we can successfully do

> gulp compress

and gulp will clean the dist directory and re-concatenate the CSS files. Last we want to be able to do

> gulp

and have it clean and compress (and run any other tasks we have specified) automatically. So we will add one more task called default.

gulp.task('default', ['compress', 'relocate:images']);

BAM! Done (here is the finished file), now we can change this (inside our index.html)

<!-- Our Stylesheets -->
<link rel="stylesheet"
href="stylesheets/header.css">
<link rel="stylesheet"
href="stylesheets/intro.css">
<link rel="stylesheet"
href="stylesheets/about.css">
<link rel="stylesheet"
href="stylesheets/contact.css">
<link rel="stylesheet"
href="stylesheets/footer.css">

into this

<!-- Our Stylesheets -->
<link rel="stylesheet" href="dist/css/style.min.css">

How elegant.

Now let’s close up that branch and launch our site on the World Wide Web!

> git add .; git commit -am "Added: gulp file to make my life easier."; git push
> git flow feature finish gulp; git push
(without gitflow) > git checkout develop; git merge feature/gulp; git push
> git checkout master; git merge develop; git push
To view your site head to a browser and go to https://<your-username>.github.io/!

If we had a more complicated application gulp could automate a surprising amount of it. From compressing and linting code and compressing and modifying images to renaming and relocating resources (even to remote servers (ie. CDNs)). It is a powerful tool which can simplify your project workflow and make you a more efficient developer.


If you enjoyed this series please let me know! I want to create some more tutorials, possible migrating this site into an Angular2 app? Let me know if you would be interested in that, or if you have any great ideas that you want to see done step by step (not limited to web technologies). I have a few more website relevate posts coming up (SEO via AI and Medium on Your Personal Website), so stay tuned!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.