ionic(cordova)で本番環境、開発環境を切り替える

ionicに限った話じゃないかもしれないけど。
今回やりたかったのは、本番と開発でつなぎこむAPIのURL等を切り替えたりしたかった。

今回は少し調べて、node-env-fileというのを使った。
また、gulp-concatも使ってる。

今回は以下のようなファイル構成を想定。環境によって切り替えたい値はここで定義するイメージ。

www/js/config/development.js
www/js/config/staging.js
www/js/config/production.js

development.js

angular.module('starter.values')
  .value('config', {
    api_url: "http://example.com"
  });

こんなようなファイルを環境ごとにつくるイメージ。

インストール

$ npm install node-env-file

.env ファイルを新規で作成

# mode=production
# mode=staging
mode=development

gulpfile.jsを編集

var env = require('node-env-file');

env(__dirname + "/.env");
var conffile = "config." . process.env.mode . ".js";

gulp.task("js.concat-values", function() {
  return gulp.src(["www/js/config/" + confifile])
    .pipe(concat("config.js"))
    .pipe(gulp.dest("www/build/js"));
});

あとはwww/index.htmlで上記つくったファイルを読み込む

<script src="build/js/config.js"></script>                                                                                                                                                                         

なんかヌケがありそうだけどイメージはこんな感じ。あとで追記するかも。以上です。