A Quick Introduction To Gulp: A Web Development Task Runner

Gulp Development Task RunnerGulp is a powerful web development task runner and build tool. We take a look at what Gulp can do and why you should be using it in your web dev workflows.

If you’ve been around as long as I have, you’ll remember when writing a web site involved a text editor, HTML, and possibly some CSS if you were feeling adventurous. Times have changed. Web development, even for simple sites often involves complex workflows with many different moving parts.

I’m a fan of static site generators and I love to play around with them. One of the reason I enjoy them is that they let me get much closer to the development process than I would be able to if I used a CMS like WordPress. But without a CMS there’s a lot of work to get the site’s source files, which may involve, SASS, templating languages, JavaScript, images, and numerous other technologies, into a state where I can push them up to the server. Files must be compressed and minified, images must be optimized, and so on.

It’s a pain and I always forget something. Or at least I did until I started using Gulp. Gulp is a task runner and build runner for front-end development; it can automate all the little jobs that go into building a site, including the tasks I’ve already mentioned, but many more as well. Gulp is similar in functionality to Grunt, but it’s conceptually quite different and much more fun to use.

If you’re a Linux user, you’ll be familiar with the idea of pipes and streams. On the Linux command line, you can chain lots of small commands together and pass a file through each in turn as a stream. Gulp works on a similar principle. There are hundreds of plugins each of which does a specific job. Files are streamed through each plugin in turn before being written to a destination.

For example, lets say you wanted to concatenate, rename, and minify a site’s JS scripts. You’s simply pass the files through plugins to carry out each of those tasks.

Gulp configuration files are very simple JavaScript. Even someone without much familiarity with JS won’t have a lot of trouble figuring them out. For the example we talked about in the last paragraph, the gulpfile would look like this (thanks to Travis Maynard):

var gulp = require(‘gulp’);
var concat = require(‘gulp-concat’);
var uglify = require(‘gulp-uglify’);
var rename = require(‘gulp-rename’);

gulp.task(‘scripts’, function() {
return gulp.src(‘js/*.js’)
.pipe(concat(‘scripts.js’))
.pipe(gulp.dest(‘dist’))
.pipe(rename(‘scripts.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist’));
});

As you can see, we simply declare the plugins we want to use, then create a function that takes a source file and streams it through each in turn, before depositing it in the destination directory.

We’d run this script with a simple “gulp scripts” command, but, of course it’s possible to create multiple functions and have gulp execute all of them by default, so that running a site build is a simple matter of typing “gulp” on the command line.

This barely scratches the surface of what Gulp can do, but hopefully it has whetted your appetite. I’ll leave you with some resources to get you started with Gulp.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED