Tag Archives: GulpJS

gulp-less

Gulp LESS Fails Silently – Add Some Logging

Click Here for TL;DR

Gulp LESS Nightmare (due to operator error)

I recently wrote a post about GulpJS and all of it’s awesomeness. Almost immediately following that post I spent several hours pulling my hair out because I couldn’t figure out why my Gulp LESS task wasn’t working. So I did the research and suffered through the misery so you don’t have to 😉

Let Me Set Up Our Environment For My Failing Gulp LESS Task Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp     = require('gulp'),
    notify   = require('gulp-notify'),
    less     = require('gulp-less'),
    paths    = {
        less : ['app/less/*.less']
    };

gulp.task('less', function() {
    return gulp.src(paths.less)
        .pipe(less())
        .pipe(concat('master.css'))
        .pipe(gulp.dest('app/build/css'))
        .pipe(notify({ message: 'Finished LESS Gulp Tasks'}));
});

Continue reading

GulpJS

GulpJS Setup and Configuration

Click Here for TL;DR

GulpJS is a Task/Build Runner. For more information on GulpJS you can visit there website. GulpJS is different from other solutions out there (i.e. Grunt) for several reasons. I’m going to touch on some of those reasons and show some example gulpjs files below:

Streaming Through Pipes

Gulp uses node streams. In a quick way, what this means and the benefit to us is that we can pass data straight from one task to another. This is one way in which GulpJS differs from another task runner like Grunt.

Lets say, for example, you want to concat and then minify some javascript files. To do this with grunt you needs to concat all your files into a new file (lets say contact.js) and then minify that file to a new file (lets say minify.js). When this process is done you have a leftover file that was written to disk (concat.js) that you must now go and delete.
Continue reading