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 packagesvar 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

Angular 2 - Gulp - change extension of file

Gulp-ext-replace allow us to change extension of file when it is copied to the destination.

Lets take a example below:

we have a file called consultants.json present under App/Data folder. we want to copy this file as soon as it changes to the destination folder Build/App/data. While copied in destination folder it should change the extension to consultants.txt

To do this we can take help of gulp-ext-rename package to install run following command:

Note: Prior to that make sure you have gulp-cli installed globally.

npm install --save-dev gulp-ext-replace

once we have installed this we can create  a watch in our gulpfile.js as below:

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

    gextreplace = require('gulp-ext-replace');

// watch .json file changes in app/data/ directory

// if any .json file changes then save as .txt in Build/app/data 

gulp.watch('app/data/*.json', function(obj) {

    gutil.log('Gulp - Copying .json file [ ' + obj.path.basename + ' ] to build folder - started');

    

    gulp.src(obj.path)

      .pipe(gextreplace('.txt'))                // changing extension of file before copy

      .pipe(gulp.dest('build/app/data')) // copy .txt file in respective folder of "build" folder 

    

    gutil.log('Gulp - Copying .json file [ ' + obj.path.basename + ' ] to build folder - completed');

});

First, grab our gulp packages by gextreplace = require('gulp-ext-replace') command.

Second, create watch on all .json file by gulp.watch('app/data/*.json'...  command.

Third, specify the source of file by gulp.src command.
use pipe to add another command to replace the extension from '.json' to '.txt'.
use pipe command to add another command gulp.dest which will have the destination folder details where we need to copy the file.