Join us at Fortnox App Market today!

Gulp!

Have you heard of Gulp?

Or maybe Grunt? Either way both of those guys are task runners. Since Gulp is a bit quicker he’s my closest friend. But they both get the job done. So what do these task runners do?

Well they can do a lot.

Why use a task runner?
In one word: automation.

You can uglify javascript , compile your SASS and optimize images. And this is just the beginning. Gulp is the younger of them two but it got 980 plugins to choose from at the moment.

How to get started?

A lot of smart people has written or made screencast about it. First thing you need is Node, since both grunt and gulp take advantage of the awesome NPM system. After that install gulp globally:

    $ npm install --global gulp

Then instead of reading about it here you should watch some awesome getting started vids.

Googles plugin tips!

When you’re ready to roll I recommend checking out Googles Web Starter Kit. Its a kit for building modern webpages and of course they are using Gulp. So go to Github, find the Gulpfile.js, check out their tasks and get some inspiration. If you want a complete list of all their plugins you can always check the package.json file.

Random plugin tips!

I thought I share a few of my favorite plugins, which you wont find in Googles Kit:

Killer Tip

If you read all the way here you should at least get a code snippet. When you are using gulp watch for either javascript or less/sass its essential that you catch errors. Otherwise everytime you miss a semicolon your gulp task will stop.

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

    function handleError(task){
        return function(err) {
            gutil.log(gutil.colors.red(err));
            notify.onError(task + ' failed, check the logs..')(err);
            this.emit('end');
        };
    };
    gulp.task('styles', function() {
      return gulp.src('src/main.less')
        .pipe(less())
        .on('error', handleError('Less'))
        .pipe(gulp.dest('dist/styles'));
    });

Here I catch the error and sends the task name to my handleError function, which uses the notify plugin to write it out. This function could be in a separate file which we in that case would require.

Thanks for reading and see you later!