Messing about with gulpjs

So I've just literally finished messing about with gulp – opened a new tab in sublime and started typing this article. I've been using Grunt for a while to run tasks mainly for my jekyll sites, but when I head about gulp on an episode of the Shop Talk Show I decided to check it out.

Before I continue if you don't know what a task runner is, check out 'Why use a task runner?' on the Gruntjs homepage.

Gulp vs Grunt

The first thing I noticed was gulp is fast, super fast, possibly because it uses streams which Grunt doesn't (read more about it on the gulpjs site). Syntax between both is slightly also different, gulp is written like a standard node js app which will make node devs feel right at home whereas Grunt is completely different. Basically you can do more with less code in gulp. Grunt however has way more plugins than gulp, since it's been around for a lot longer.

I haven't actually looked into the details but apparently gulp doesn't produce as many tmp/log files as Grunt does, I'm not completely sure how that stuff works though.

Getting Started

Gulp runs on nodejs so if you haven't done so already – go download and install node it's a simple executable file for Mac & Windows users. I'm not sure how it works on Linux machines.

Note: If you're on a Windows machine ignore the 'sudo' command and just open the command line as an Administrator.

1.Open up your command line/terminal and type

sudo npm install -g gulp

This should install gulp globally(-g) on your machine.

2.You now need to go into the directory of your project and type.

npm install --save-dev gulp

This will make gulp a dev dependancy in your package.json file.

Note: You can install gulp-util as well as gulp with this command.

npm install --save-dev gulp gulp-util

But I've never needed to use gulp-util so I usually avoid it.

3.Now make a new file called gulpfile.js in the root of your project folder and paste this into it.

var gulp = require('gulp');
var gutil = require('gulp-util');

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

4.That's pretty much it, if you want to run gulp just type this.

gulp

If you want to know what plugins are availiable for gulp – visit this site.

Here is an example of one of my gulpfiles to see a few things that can be done.

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    notify = require('gulp-notify'),
    prefix = require('gulp-autoprefixer'),
    minifyCSS = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

gulp.task('styles', function () {
    gulp.src('public/css/dev/*.scss')
        .pipe(sass())
        .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
        .pipe(minifyCSS())
        .pipe(gulp.dest('public/css'))
        .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('scripts', function () {
    gulp.src('public/js/dev/*.js')
        .pipe(concat("scripts.js"))
        .pipe(uglify())
        .pipe(gulp.dest('public/js'))
        .pipe(notify({ message: 'Scripts task complete' }));
});


gulp.task('watch', function () {
    gulp.watch('public/css/dev/*.scss', ['styles']);
    gulp.watch('public/js/dev/*.js', ['scripts']);
});


gulp.task('default', ['watch']);    

I'm not the kind of writer that explains what every single line of code does, if you want that kind of thing you read this great gulp tutorial by Travis Manyard.

gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.

As a side note, I saw this warning a lot when first using gulp and I couldn't find any articles on how to get rid of it, so I thought I'll write a bit about how I sorted it out.

I followed a tutorial which gave me this to watch sass files.

gulp.task('default', function(){
    gulp.watch('./scss/*.scss', function(){
        gulp.run('sass');
    });
});

The gulp.run() function will be removed in v4 of gulp, so the above code should be rewritten as.

gulp.task('watch', function () {
    gulp.watch('./scss/*.scss', ['sass']);
});

gulp.task('default', ['watch']);

This method removes the need for gulp.run().

Have fun task running.