grunt 根據部署環境配置環境參數

簡要說明一下：

我的項目是angular寫的，然後使用了grunt進行壓縮，然後裏面有一些環境變量，每次上線前都要手動的把配置變量修改一下。有時候忘記了，提交上去，然後一起部署到線上，經常發生這種致命的錯誤，然後上頭領導叫我寫一下配置文件，能正確清晰的辨別哪個文件是線上哪個是線下。

之前也試過幾種方法，在這裏也跟大家分享一下，比較簡陋，別太介意

第一種：就是把線上線下的環境變量都寫出來，然後用一個變量來控制，這樣一起壓縮，每次提交和在本地測試的時候，只要修改變量就好

例如：

var debug = 1;

if(debug){

線上的變量(例子)

$rootScope.href = "www.baidu.com"

} else{

本地測試的變量(例子)

$rootScope.href = "local.baidu.com"

}

本來我覺得第一種還算挺方便的，但是上司看了，覺得還是麻煩，叫我再找一個，類似就是grunt配置的，不同的命令壓縮不同變量。好吧繼續找然後寫出來

以下就是這次的主題，grunt的環境配置  根據不同的壓縮命令來指定（我的例子是grunt（默認）壓縮出來的是本地的地址，grunt online壓縮出來的是線上的地址）

首先需要下載一個grunt的插件

npm install grunt-string-replace --save-dev

然後把下面的代碼往gruntfile.js文件裏面添加 寫在grunt.initConfig裏面

'string-replace': {

dist: {

files: {

'dist/': "dist/js/app.js",

},

options: {

replacements: [{

pattern: /http:\/\/local.baidu.com/ig,

replacement: "http://www.baidu.com",

},{

pattern: /http:\/\/123test.baidu.com/ig,

replacement: "http://123.baidu.com",

},{

pattern: /http:\/\/apilocal.com/ig,

replacement: "http://api.com"

}]

}

}

}

files（本人理解）：所要替換的指定文件位置，就是我所要替換的地址在這個文件裏面

options：選擇替換的東西

pattern:正則匹配本地的地址

replacement：替換成線上的地址

然後添加插件進去，和使用的命令進去

grunt.loadNpmTasks('grunt-string-replace');

grunt.registerTask('default', ['uglify','cssmin']);（這是壓縮默認的）

grunt.registerTask('online', ['uglify', 'cssmin', 'string-replace']);（這是壓縮替換的）

說明一下，就是文件裏面寫的環境直接寫本地的，配置的時候是線上的，這時候執行 grunt，壓縮出來的還是本地的地址

執行grunt online壓縮出來的是線上的地址