All geek questions in one place

Using Grunt to preprocess and replace environment variables

I have installed an angular application that uses grunt, but I would like to use grunt as a preprocessor to replace variables, and I could not find anything that would suit my needs.

For example, if I change the name of my main application module to “someAppName” in the configuration file, I would just like to use something like “ENV.APP_NAME” in different html and js files and replace them with the corresponding value for this environment.

Ideally, I would like to have a configuration file somewhere along these lines, either as a .json file, or using module.exports to expose an object that sets values ​​for different environments:

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

and then I could create a grunt task and pass it either "dev" or "prod" to start the preprocessor and replace each instance with the corresponding value. I found this https://github.com/STAH/grunt-preprocessor , but the examples are confusing, and I don't think this is exactly what I'm looking for.

Is there anything similar that allows me to create pre-processed environment variables and read them from an external configuration file, or am I forced to create my own grunt plugin? Has anyone achieved something similar with a grunt?

EDIT: I started creating a grunt plugin for this specific task, as soon as this is done and tested, I will post it on npm

+6
source share
3 answers

Ok, I finished creating the grunt plugin just for this task, because that is what I really need. It allows you to place the definitions of environment variables in a .json file, as described in my original question, and replaces all instances in the specified file or list of files.

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

So, if you have something like this

HTML

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

Js

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

The task will replace it with

HTML

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

Js

 var version = "0.1.0"; alert(version);
+2
source

Use grunt-ng-constant .

Npm install this plugin:

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

Then in grunt write to the configuration file:

 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' } } } },

Then add the grunt task:

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

Running the task will generate config.js with the constants defined in the grunt file. Then add config.js to your index.html:

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

Add it to your application:

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

And enter into the controller:

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

You can set different variables for production and different for development by installing it in the grunt file and installing ng: production or ng: development.

Refer to this article explaining the procedure for more information.

+6
source

You can do something using grunt-string-replace when loading some configuration values ​​into Grunt from a JSON file. Suppose you had this in myconfig.json:

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

Then maybe load the configuration into Gruntfile.js from JSON with something like:

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

Then you will have some kind of task like this:

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

This would make the actual changes to the files if you had "src" and "dest" in the same folder, otherwise it would put the processed files in the dest folder.

I did not use this recipe for preprocessing, but I use it for other types of things, such as replacing tags in the framework with the application name, as indicated in package.json.

Hope this helps.

+2
source

Source: https://habr.com/ru/post/982151/

More articles:


All Articles