使用gulp進行簡單的分環境配置

出發點

一般咱們在測試開發，正式運行等不一樣環境中，代碼所使用的某些配置，如請求的api地址，文件存放位置等是不一樣的，實現這些配置信息的統一管理和快速配置能夠減小咱們手動更改的麻煩。

解決方案

• 將不一樣環境下的配置信息以json形式統一存儲在config.json文件中

• 添加constants的gulp任務，在運行其餘task如serve,build前執行，主要負責根據命令行傳入的environment參數，取出json文件中對應的環境配置信息，生成config.js導入到被引用的文件目錄下。

• 相應的js文件能夠經過引用全局變量的方式使用配置信息。

配置步驟

建立config.json文件

{
  "development": {
    "apiUrl": "http://dev.applicationName.com/api/projectName/"
  },
  "production": {
    "apiUrl": "http://applicationName.com/api/projectName/"
  }
}

在gulpfile.js中添加constants任務

constants任務主要解決兩個問題

• 獲取命令行中的env參數，從而取出對應的json配置

• 將配置信息生成js文件

//npm install --save-dev minimist gulp-util

import minimist from 'minimist';
import gutil from 'gulp-util';

//默認development環境
var knowOptions = {
  string: 'env',
  default: {
    env: process.env.NODE_ENV || 'development'
  }
};

var options = minimist(process.argv.slice(2), knowOptions);

//生成filename文件，存入string內容
function string_src(filename, string) {
  var src = require('stream').Readable({ objectMode: true })
  src._read = function () {
    this.push(new gutil.File({ cwd: "", base: "", path: filename, contents: new Buffer(string) }))
    this.push(null)
  }
  return src
}

gulp.task('constants', function() {
  //讀入config.json文件
  var myConfig = require('./config.json');
  //取出對應的配置信息
  var envConfig = myConfig[options.env];
  var conConfig = 'appconfig = ' + JSON.stringify(envConfig);
  //生成config.js文件
  return string_src("config.js", conConfig)
      .pipe(gulp.dest('app/scripts/'))
});

在其餘任務前執行前執行constants 任務

gulp.task('serve', ['constants','styles', 'fonts'], () => {});

使用步驟

傳入env參數

以下（默認是development環境下）

gulp serve --env production

生成的config.js文件內容

appconfig = {"apiUrl":"http://applicationName.com/api/projectName/"}

在js中使用配置信息

var share = function() {
  $.ajax({
    url: appconfig.apiUrl,
    data: {
      url: window.location.href
    }
  }).done(function(data) {
    //code ....
  });
};

其餘

若是使用了angularJS，能夠經過gulp-ng-constants插件進行分環境配置的實現

只是提供一個思路和實現的方法，可自行擴展優化