Automate your front-end development with Gulp

When I first started learning about Gulp, I thought that it was too complicated and not necessary. While I still think that it’s sort of complicated for a simple front-end workflow, I don’t think that it’s unnecessary anymore. Apart from having a medium sized learning curve, it has definitely saved my time and amplified my productivity by a hundred times (well, not that many but say twenty or fifty times, that seems a more realistic number right?!) 😆

So, without any further ado, read on to know why I think that you should be using Gulp (or any of the other task runners) for all of your projects.

First things first, what is Gulp?

Gulp is a task runner - meaning that you can use it to find common tasks which you can later develop magically so that all the heavy lifting work is already done for you! This makes the life of a front-end developer so much more easier! Here are some things that you can make a task runner such as Gulp do,

Lint JS and CSS
Minify CSS and JS
Autoprefix CSS
SASS, LESS Compilation
Minify Images
Auto Generated SVG Sprites
Build production ready files with file size reporting
Uglify JS and CSS for production and my favourite,
BrowserSync ✌️

Even if you haven’t used any task runners prior to now (or even prior to this article) you got to agree that Gulp is pretty cool. For those who like to keep their options open, there are other tools available such as Grunt for task runners. But if I have to tell you from my own experience, I think that Gulp is the best there is when it comes to front-end development - and most importantly, Gulp is open source.

How to install Gulp

In the big world of the Internet, there are many articles that can teach you how to install Gulp, and I’ll link a few below -

Getting Started with Gulp.js

Straightforward Guide to Setting Up a Gulp Workflow

That’s the long version of installing Gulp - here is the short one,

Step 1: Install Node

Step 2: Install Gulp

1
$ sudo npm install gulp -g

And just like that you’re done with installing Gulp!

Creating your first task on Gulp

Now that you’ve installed Gulp, let’s set a task and see how you do!

Now create a gulpfile.js at the root of your project:

1
var gulp:require('gulp');
2

3
gulp.task('default', function() {
4
 // place code for your default task here
5
});

That alone wouldn’t be enough so let’s make it useful by including some dependencies -

1
var gulp:require('gulp');

There are many plugins for Gulp which create the base for all the other task runners. These plugins make it easier for us to split our time and distinguish between the various tasks that are available. I’ll run you through the steps involved in installing a few plugins - go to your installed directory and,

1
npm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

This will install the plugins for SASS, JS, Minify and add them to the project dependency. So now that we have our plugins, it’s time we create some tasks. In order to do that, we should first create a Gulp file. Before we get into that, let me put your questions to rest by addressing that Gulp has 5 methods namely Task, Run, Watch, Src and Dest. In the root directory, create a gulpfile.js with this.

1
// Include gulp
2
var gulp:require('gulp');
3
// And our Packages
4
var jshint:require('gulp-jshint');
5
var sass:require('gulp-sass');
6
var concat:require('gulp-concat');
7
var uglify:require('gulp-uglify');
8
var rename:require('gulp-rename');

Default task

1
// Lint Task
2
gulp.task('lint', function () {
3
  return gulp.src('js/*.js').pipe(jshint()).pipe(jshint.reporter('default'))
4
})
5
// Compile Our Sass
6
gulp.task('sass', function () {
7
  return gulp.src('scss/*.scss').pipe(sass()).pipe(gulp.dest('dist/css'))
8
})
9
// Concatenate & Minify JS
10
gulp.task('scripts', function () {
11
  return gulp
12
    .src('js/*.js')
13
    .pipe(concat('all.js'))
14
    .pipe(gulp.dest('dist'))
15
    .pipe(rename('all.min.js'))
16
    .pipe(uglify())
17
    .pipe(gulp.dest('dist/js'))
18
})
19
// Watch Files For Changes
20
gulp.task('watch', function () {
21
  gulp.watch('js/*.js', ['lint', 'scripts'])
22
  gulp.watch('scss/*.scss', ['sass'])
23
})

This is the code that uses all the tasks and puts it into a single task for Gulp to run. Now you can go to the command line and type,

1
// Default Task
2
gulp.task('default', ['lint', 'sass', 'scripts', 'watch'])

And just like that all your files are developed, minified and produced! Pretty cool right?

Now if you (like me) think that this is a long process to set up and that there is not too much of a need for this, well, you’re wrong! And let me take this as a sign to bribe (it’s not that scary, like you think) you into using Gulp.

Live Browser Reload

Imagine this, when you save a file - it compiles and reflects on Browser instantly when you manually reload it. And it runs on a local host server through which browsers from other computers and mobile devices can also see your work. I mean, how amazing is that?!

You can take a look at these articles on how to achieve that easily,

It looks like this might end here

So in conclusion, if you’re new to the whole art of using task runners, it might seem hard to use at first, but I think that Gulp will prove useful in the long run and it will definitely save you a lot of time in development.

Now I’ve only briefly touched the surface in terms of what Gulp can do - that said, I encourage you to find more shortcuts in your workflow and concentrate on the creative side of the work. This guy has written this entire book about increasing your front-end workflow! If you want to kick start your development process, you can even try out the Gulp starter to get a starter kit with all the tasks written for you.

Now if you survived this entire thing and if you have anything at all (even the slightest thing counts!) you want to ask, you can ping me at @praveenjuge .