使用Grunt爲AngularJS配置不一樣的環境變量

相信你也遇到過，開發環境中使用的接口地址與部署環境不一樣，這樣，每次build以前還須要手動修改，一點都不酷。不過，你能遇到的問題，別人也會遇到，偉大的Google總會給你答案。

generator-env-config配合grunt-replace使用能夠實現分開配置開發和生產環境。

步驟以下：

• 安裝generator-env-config

  npm install generator-env-config

• 生成開發環境的配置文件

  yo env-config

  運行以後，在app平級目錄生成config文件夾，下面environments下面會生成developement.json文件，內容以下：

  {
    "foo": "bar"
  }

  裏面的內容就是grunt-replace須要替換的鍵值對

• 生成AngularJS配置文件

  yo env-config:angular config

  運行以後，在config文件夾下生成config.js文件，內容以下

  angular.module('services.config', [])
    .constant('configuration', {
      foo: '@@foo'
    });

  裏面的內容能夠自定義爲不一樣的變量，經過grunt-replace將@@替換成對應的值

• 安裝grunt-replace

  npm install grunt-replace --save-dev

• Gruntfile.js加載該任務

  grunt.loadNpmTasks('grunt-replace');

• initConfig配置replace任務

  replace: {
    development: {
      options: {
        patterns: [{
          json: grunt.file.readJSON('./config/environments/development.json')
        }]
      },
      files: [{
        expand: true,
        flatten: true,
        src: ['./config/config.js'],
        dest: '<%= yeoman.app %>/scripts/services/'
      }]
    }
  }

• 生成configuration的constant

  grunt replace:development

  執行完後，app/scripts/services下面會生成一個config.js文件，內容爲

  angular.module('services.config', [])
    .constant('configuration', {
      foo: 'bar'
    });

• 將scripts/services/config.js引入index.html

• app.js聲明services.config依賴

  angular.module('environmentApp', ['services.config']);

• 在controller、service中使用configuration

  angular.module('environmentApp')
    .controller('MainCtrl', function ($scope, configuration) {
      $scope.foo = configuration.foo;
    });

• Gruntfile.js中的serve中添加replace任務

  grunt.task.run([
    'clean:server',
    'wiredep',
    'concurrent:server',
    'autoprefixer',
    'connect:livereload',
    'replace:development', // serve中添加
    'watch'
  ]);

上面是在開發環境中設置環境參數，若是要添加參數，只須要修改developement.json，並在config.js中聲明此變量，運行grunt replace:development後，service下的config.js就會出現對應的值。

若是你想配置生產環境，只須要運行

yo env-config production

運行以後，config/environments下面會生成production.json，修改爲生產環境的配置，在Gruntfile.js中build task中添加replace:production

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'replace:production', //添加
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);