Building angularjs configuration file by gulp-ng-config

gulp-ng-config.md

gulp-ng-config

In our angularjs app, we usually call remote API to get data to make our app live. But we will have different environment for our app when we develop it or put it online. So we will meet the requirement to build our app for different environemnts. How to deal with it when you use gulp to build your app?

Yes, gulp-ng-config can help you to do it easily.

Introduction of gulp-ng-config

You can refer https://www.npmjs.com/package/gulp-ng-config to get more details of this plugin.

Install gulp-ng-config

Under your package.json file path,

npm install gulp-ng-config --save-dev
npm install gulp-concat --save-dev

You will find in your gulp-ng-config plugin already added in your package.json devDependencies.

Define gulp config task

In gulpfile.js, it should be a task to generate the configuration js.

var gulp = require('gulp');
var gulpNgConfig = require('gulp-ng-config')
    concat = require('gulp-concat'),;
    
gulp.task('config-dev', function() {
  return gulp.src('./src/config/config.json')
        .pipe(gulpNgConfig('app', {
          environment: ['env.dev', 'api_uri'],
          templateFilePath: './src/config/configTemplate.html'
        }))
        .pipe(concat('config.js'))
        .pipe(gulp.dest('./build'))
});

What does above task do?

• grap the config.json from ./src/config/config.json
• using gulp-ng-config to define the module. It's name is app
• set the constants key from ./src/config/config.json
• set the template for our config.js's. Maybe some app needs some header or footer. Or it needs to put into in some special place of that config.js
• concat and output the built config.js to ./build folder