Getting started with Gulp on Windows 7

Over this post and the next one, I will be covering getting started with Gulp and Grunt on Windows 7. We will start with Gulp.

Gulp and Grunt both need Node.js installed to work. To install Node.js, go to the below URL.

NPM (node package manager) is installed with Node.js but is usually updated more than Node.js so you should make sure you have the newest version of NPM with the below command.
$ npm install npm –g

Next, you will want to install gulp globally.
$ npm install –global gulp

To save gulp as a dev dependency in your project, first proceed to the project’s source folder. Then run the following command to save gulp locally and update your package.json file with gulp as a dev dependency.
$ npm install –save-dev gulp

You will need to create a gulpfile.js at the root of your project. Below is an example of the most basic version of a gulpfile.
//**********file contents********************
var gulp = require(‘gulp’);

gulp.task(‘default’, function() {
//execute any code here that you would like to run under the default gulp task
});
//**********file contents********************

We will leave the default task alone at this time and write a new task to convert a directory of CoffeeScript files into their equivalent JavaScript files. First, we will need to install the gulp-coffee plugin. We will also install the gulp utility plugin so we can log any errors we run into while compiling our CoffeeScript files into JavaScript.
$ npm install gulp-coffee gulp-util

Append the below to your gulpfile.js.
//**********file contents********************
var coffee = require(‘gulp-coffee’),
gutil = require(‘gulp-util’);

gulp.task(‘coffee’, function() {
gulp.src(‘./src/*.coffee’)
.pipe(coffee({bare: true}).on(‘error’, gutil.log))
.pipe(gulp.dest(‘./public/’))
});
//**********file contents********************

Now to test this out, run the below command.
$ gulp coffee

You will see that it will compile all your coffee files into js. You can also setup a watch on this folder so that anytime a change to a file is made, this task will be run and re-generate your js files. I will be showing that in a future post.

Leave a comment