2qrvsg
Last Updated: February 25, 2016
·
7.136K
· ceiga

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.

Say Thanks
Respond

4 Responses
Add your response

12661
9a1e40314aff0289f01b71182d530d3d

What is it gulp-util used for?

over 1 year ago ·
12680

gulp-util is used to do a bunch of things with streams from combining them to buffering them. You need it if you want to make your own gulp plugin (I think) and it is required for certain plugins to work.

over 1 year ago ·
15089
6382fe69b5d18e9f65825d129ff922cf

When was this written? Is this current? It bothers me that many blogs about rapidly-evolving technologies don't disclose their creation date (and I mean including a year, not just month/day).

Probably time to dig out my http://web.archive.org/web/20120305104536/http://www.felixrabe.net/2010/08/last-modified/ and port it to Chrome.

over 1 year ago ·
15090
6382fe69b5d18e9f65825d129ff922cf

I just lost a good comment about gulp-util after submission thanks to your "achievements" stuff that I did not know how to exit btw. :(

I won't bother posting another comment here, I hate when software just loses my work like that and disregards my time.

over 1 year ago ·