Friday, May 15

Gulp 101 - Getting started with Gulp.js - Lesson 1

Gulp is javascript task runner. Sounds interesting. I had heard about grunt.js but never got a chance to work on it. Some days back i learned about gulp.js and how well it is being taken by the web dev community.

What I know?
Gulp is a javascript task runner. In front-end now a days we need to take care of many things before we ship our code to production. Task such as minification of CSS and JS files, concatenation of multiple css and js, image optimization, converting the sass files into css files or for that matter the less files into css files, and many many more.

As far as minification goes, I would copy my development code and paste it in some minification app, a manual process. I had to ensure that I had a backup of the unminified version for development. Same with js.

However with tools like gulp.js, working on automating tasks is become very easier.

What is gulp.js?
Gulp is a JavaScript task runner. It has 4 major api's which are
1) gulp.task => Defines a task.
2) gulp.src => Reading of files.
3) gulp.dest => Writes all the files.
4) => Watches files.

Getting started with Gulp
1) Install node.js first. Make sure you also have npm installed. For windows, running the node.js exe file does the trick. Once you have installed node, check in your command prompt by typing
node -v
2) Install gulp globally.
npm install gulp -g
 You can verify if gulp is installed correctly by looking for the gulp version using the command
gulp -v
2) Installing gulp locally. Make sure you are in the project folder in your command prompt.
npm install --save-dev gulp
 --save-dev saves it to the devDependencies in package.json file. A devDependency is something that is required during development. For example out gulp task runner. package.json also has a dependency key which means that all the packages inside these are required during runtime. For example angularjs. This package would be required when we run the application.

3) After you have installed gulp locally, create a gulpfile.js file in your project. Lets create a simple gulp task that would print a message to the console.

Creating our first useful task
Let's create a simple task that compiles our less files into css files.

1) Install the gulp-less plugin
npm install --save-dev gulp-less
Make sure you are in the right project folder when running the command. Your command prompt should look something similar to this

See below gist along with comments

Be the first one to Comment!!!

Post a Comment