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.