使用Grunt預處理和替換環境變量

我有一個使用grunt的角度應用程序設置，但我希望能夠使用grunt作爲預處理器來替換變量，並且我一直無法找到任何匹配的我的需求。例如，如果我在配置文件中將我的主應用程序模塊的名稱更改爲「someAppName」，我想在各種html和js文件中使用諸如「ENV.APP_NAME」之類的內容，並將其替換爲以適合該環境的價值。使用Grunt預處理和替換環境變量

理想我想有一個配置文件沿着這些線路的某處，無論是作爲上傳.json文件或使用module.exports以暴露一個對象，該對象指定爲不同的環境的值：

{ 
    APP_NAME:{ 
     dev: "someAppDev", 
     prod: "someApp" 
    }, 
    API_BASE:{ 
     dev: "localhost:8000/", 
     prod: "https://www.some-site.com/api/" 
    } 
}

和那麼我可以創建一個grunt任務，並將它傳遞給「dev」或「prod」，讓它運行預處理器並用相應的值替換每個實例。我發現這個https://github.com/STAH/grunt-preprocessor，但這些例子令人困惑，我不認爲這正是我期待的。

是否有這樣的事情，允許您創建預處理的環境變量，並從外部配置文件讀取它們，還是我被迫構建自己的grunt插件？有沒有人獲得類似的咕嚕聲？

編輯：我已經開始建設一個咕嚕插件爲這個特定的任務，一旦完成並測試我會後它掛在故宮

來源

2015-02-07 ejfrancis

也許這會幫助更換/如何使用的環境變量 - 在 - 你r-angular-application – cyan 2015-02-07 22:25:17

我已經看到了，它確實添加了環境變量，但不是作爲預處理器。所以我可以訪問控制器中的環境變量，但是我不能將它作爲html文件或json的一部分，並且將其替換爲我正在尋找的 – ejfrancis 2015-02-07 22:29:43

也許獨立程序會讀取所有html js文件之前和替換指定的標籤？它可能是用java編寫的。像全部替換。 – cyan 2015-02-07 22:36:31

好吧我最終爲此任務構建了一個grunt插件，因爲這是我真正需要的東西。它允許您將環境變量定義放置在.json文件中，就像我在原始問題中描述的那樣，並替換指定文件或文件列表中的所有實例。

https://github.com/ejfrancis/grunt-envpreprocess

所以，如果你有這樣的事情

HTML

<head> 
     <title>ENV.APP_NAME</title> 
</head> 
<script src="ENV.API_BASE/user/create">

var version = "ENV.APP_VERSION"; 
alert(version);

http://mindthecode.com：

的任務將與此

HTML

<head> 
    <title>AppDev</title> 
</head> 
<script src="http://localhost:8000/user/create">

var version = "0.1.0"; 
alert(version);

來源

2015-02-09 19:55:57 ejfrancis

使用grunt-ng-constant。

NPM安裝這個插件：

npm install grunt-ng-constant --save-dev

然後在咕嚕寫入配置文件：

ngconstant: { 
    // Options for all targets 
    options: { 
    space: ' ', 
    wrap: '"use strict";\n\n {%= __ngModule %}', 
    name: 'config', 
    }, 
    // Environment targets 
    development: { 
    options: { 
     dest: '<%= yeoman.app %>/scripts/config.js' 
    }, 
    constants: { 
     ENV: { 
     myvar1: 'Hello from devel', 
     myname: 'John Doe' 
     } 
    } 
    }, 
    production: { 
    options: { 
     dest: '<%= yeoman.dist %>/scripts/config.js' 
    }, 
    constants: { 
     ENV: { 
     myvar1: 'Hello', 
     myname: 'John Doe' 
     } 
    } 
    } 
},

然後添加到咕嚕任務：

grunt.task.run([ 
    'clean:server', 
    'ngconstant:development', 
    'connect:livereload', 
    'watch' 
    ]);

正在運行的任務會產生配置。帶有在gruntfile中定義的常量的js。然後加入config.js到您的index.html：

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

它注入到你的應用程序：

var app = angular.module('myApp', [ 'config' ]);

，並注入到控制器：

.controller('MainCtrl', function ($scope, $http, ENV) { 
     console.log(ENV.myvar1); 
    });

您可以設置不同的變量生產和不同的開發，通過設置gruntfile和設置：生產或ng：開發。

請參閱this article解釋過程以獲取更多信息。

來源

2015-02-07 22:33:12 cyan

這很有用，但我不認爲這正是OP正在尋找的東西。不過，我可以利用它，謝謝。 – 2015-02-07 23:42:32

我認爲這是一個很好的選擇和OP正在尋找.. – Vishwanath 2015-02-08 06:40:16

當從JSON文件加載一些配置值到Grunt時，您可以使用grunt-string-replace做些事情。假設你在myconfig.json中有這個：

{ 
    "appName": "MyGrowth", 
    "version": "1.1.2", 
}

然後可能將配置加載到Gruntfile中。從JSON JS的東西，如：

grunt.initConfig({ 
    myConfig: grunt.file.readJSON('myconfig.json'), 
// ... the rest of the stuff in your initConfig goes sure 
}

那麼你將有某種任務的這樣的可能：

'string-replace': { 
    version: { 
     options: { 
      replacements: [ 
       { 
        pattern: /MY_VERSION/ig, 
        replacement: '<%= myConfig.version %>' 
       } 
      ] 
     }, 
     files: [{ 
      expand: true, 
      cwd: 'src/', 
      src: '**/*.js', 
      dest: 'dist/' 
     }] 
    } 
}

這將使實際變化的文件，如果你有「SRC」和「DEST '放在同一個文件夾中，否則會將處理後的文件放在dest文件夾中。

我實際上沒有使用這個配方進行預處理，但是我用它來處理其他類型的東西，比如用package.json中配置的應用名替換框架中的標籤。

希望它有幫助。

來源

2015-02-08 00:00:21

非常有幫助的回答！關於OP問題的最後部分（「創建一個grunt任務並將其傳遞給'dev'或'prod'」），[outaTiME/grunt-config]（https://github.com/outaTiME/grunt-config）可以定義特定於目標的配置值，以便在執行字符串替換時使用。請參閱自述文件中的[「源代碼中的環境變量」]（https://github.com/outaTiME/grunt-config#environment-variable-in-source-with-grunt-replace）部分。 – TachyonVortex 2015-05-06 16:31:02

使用Grunt預處理和替換環境變量

回答

相關問題