gulpGulp is a build system that takes files in, modifies them and then returns the modified files for use in your project. Gulp can be used to do things like concatenate and compress javascript files, compress images, compile sass back to css and much more.

To get started with gulp you will need to install gulp globally, you do this from the terminal using the command:

npm install –global gulp

This command will install gulp globally and after you’ve done this, you can start installing gulp into your projects. To install gulp in your project simply pull up your project in the terminal and use the following command:

npm install –save-dev gulp

This command will generate a node modules folder in your project containing the gulp module inside of it. The node modules folder is where all your node modules will go once you start installing and using different modules with gulp.

Once you install gulp in you project the next step would be to create a gulp file which will contain the tasks that you want gulp to perform. I usually put this file at the root of my project and it needs to be called “gulpfile.js”. The first thing you want to do in your gulp file is import the gulp node package.

var gulp = require(‘gulp’);

This line of code will make is so now when you call the variable gulp in your gulpfile.js it will go to the gulp package in the node modules folder. So now we can use the gulp methods in our gulp file to create tasks, grab files and pass them back so our program can use them. Gulp only has 5 functions that you need learn but i will only cover three in this intro, they will be gulp.task(), gulp.src(), and gulp.dest(). gulp.task() is simply how you register a task or a function with a name. gulp.src() returns a readable file, and gulp.dest() will return a writable file. This will make more sense with an example:

gulp.task(‘sass’, function() {

return gulp.src(‘./assets/css/main.scss’)

.pipe(sass())

.pipe(gulp.dest(‘./assets/css/dist/’))

});

Take this example, here i use gulp.task() to register a function called “sass”, so now gulp knows about this sass task and can executed it when you type in the command “gulp sass” in the terminal, you ask gulp to execute tasks by typing “gulp” followed by the name of your task. Inside the function im geting the file i want to modify using gulp.src(), the file or files you want to get are specified inside the parenthesis and in quotations. Then i can pass or pipe this file to any other module i want, in this case its a sass module. Then finally once the module has done what it needed to do with the file I’m returning the modified file to the location specified inside the parenthesis using gulp.dest().

This example uses the sass module to compile sass into css but this is the basic workflow, create a task, get the file or files you need, pass them in to other modules and then return the files for use in your project. This is just a short intro to gulp but to lean more about gulp visit their site at http://gulpjs.com/.