Tuesday, December 27, 2016

Angular 2 - use gulp to automate tasks

Recently i was working on Angular TS project. I heard about gulp and its features. gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Basically i found it is useful to do some tasks such as Build directory structure for your production deployment. To use gulp you need to follow below steps

If you've previously installed gulp globally, run npm rm --global gulp before following these instructions
  1. Install gulp-cli globally
    npm install -globally gulp-cli
  2. Once you install gulp-cli. You can add for development by running following command. this command install the gulp and adds entry in package.json.
  3. npm install --save-dev gulp
  4. Simillarly you can install gulp-util and so-on. e.g.
    npm install --save-dev gulp-util
  5. Create gulpfile.js in your project root ditrectory.
    e.g. code

    /* File: gulpfile.js */

    // grab our gulp packages
    var gulp  = require('gulp'),
        gutil = require('gulp-util');

    // create a default task and just log a message
    gulp.task('default', function() {
      return gutil.log('Gulp is running!')
    });
  6. open command prompt of your project root folder and type "gulp". you will get following result. Basically the "gulp" command look into your current folder for gulpfile.js file and run it.

    C:\>gulp
    [14:00:06] Using gulpfile C:\..\..\gulpfile.js
    [14:00:06] Starting 'default'...
    [14:00:06] Gulp is running!
    [14:00:06] Finished 'default' after 11 ms
Some times you may get the following error when you try to run the "gulp" command even after proper installation.
'gulp' is not recognized as an internal or external command

Solution: Type following command in the Command Prompt
PATH=%PATH%;C:\Users\username\AppData\Roaming\npm