Skip to content

Instantly share code, notes, and snippets.

@sgyyz
Last active January 13, 2017 14:27
Show Gist options
  • Save sgyyz/dc8e2f31d8d43cb7f3acb5842a252485 to your computer and use it in GitHub Desktop.
Save sgyyz/dc8e2f31d8d43cb7f3acb5842a252485 to your computer and use it in GitHub Desktop.
Building angularjs configuration file by gulp-ng-config

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment