mlegenhausen / grunt-ng-constant Goto Github PK

Currently there the global parameters space, deps, wrap and coffee which can be set al global configuration parameter and module specific. All are currently merged in module instead to be placed in the per module options.

Current per module configuration:

dist: {
  space: '  ',
  deps: [],
  wrap: true,
  coffee: true,
  name: 'testmodule',
  constants: {
    ...
  }
}

How it should look like:

dist: {
  options: {
    space: '  ',
    wrap: true,
    coffee: true,
    deps: []  // Don't know if this is the right location
  },
  name: 'testmodule',
  constants: {
    ...
  }
}

Cause this is an API change it will be released in 0.5.0.

Proposal:

ngconstant: {
  options: {
    useStrict: true // Uses "'use strict'\n\n" as default value. Can be replaced by any string.
  }
}

All other definitions from template needs to be removed.

Currently in the code the <% __ngModule %> template needs to be extracted manually. This is caused by the collision of <% and %> with the default grunt template engine. To solve this we can use {% and %} which does not collied.

This will be a breaking change.

So it might be best to demonstrate my example:

I need to setup a dev/qa/prod environments for my angular project so I setup constants like ngconstant:DEV, which then pulls the correct DEV webservice url and points to the DEV db in my app controllers and also displays a debug toolbar in my template.

But I have two kinds of DEV environments, one when testing locally and one for the DEV box build.
When I am testing locally i'd like to add another attribute like so for my 'server' task:

  'ngconstant:DEV',        //for pointing to correct dev urls/db's/debug windows
  'ngconstant:LOCALHOST_DEBUGGING', //boolean for local debugging as I may do certain things only locally like clear cache via $templateCache, or show certain things in my app

The 'build-dev' task will just have:
'ngconstant:DEV',

But in the former case for the 'server' task, the config file only has the latter constant instead of both.

Here is my config:

ngconstant: {
      options: {
        name: 'EnvConfig',
        space: ' ',
        wrap: true,
        dest: '.tmp/scripts/config.js'
      },
      // Environment targets
      LOCALHOST_DEBUGGING: {
        constants: {
          LOCALHOST_DEBUGGING: true
        }
      },
      DEV: {
        constants: {
          ENV: {
            id: 'DEV',
            name: 'development',
            debug_toolbar: true,
            ws_url: 'dev.example.com'
          }
        }
      },
      // Environment targets
      QA: {
        constants: {
          ENV: {
            id: 'QA',
            name: 'qa',
            debug_toolbar: true,
            ws_url: 'qa.example.com'
          }
        }
      },
      /* I might needs a local environment so uses .tmp but others use final directory ? */
      PROD: {
        constants: {
          ENV: {
            id: 'PROD',
            name: 'production',
            debug_toolbar: false,
            ws_url: 'prod.example.com'
          }
        }
      }
    },

and grunt task:

grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
...

    grunt.task.run([
      'clean:server',
      'ngconstant:QA',      
      'ngconstant:LOCALHOST_DEBUGGING', 
..
});

I tried also alternatively 'merging' the variables but that didnt work either (for example using the same ENV obj but having another property and hoping the ng-constant merges it). That seemed less likely to work than above though (although that would be pretty cool to get working, then i dont need to import multiple ngconstants in my controller and just import 1 constant ENV).

  LOCALHOST_DEBUGGING: {
        constants: {
        ENV: {
           extra-merged-param: 'doesnt work either'
        }
      },

I guess I could setup a totally separate set of properties but seems like maybe we can make ngconstant just do multiple variables, instead of this:
'ngconstant:DEV',
'ngconstant:DEV_and_LOCAL', //has same props as ngconstant:DEV, +1 more property for stating im debugging locally
'ngconstant:QA',
'ngconstant:QA_and_LOCAL',
'ngconstant:STAGING',
'ngconstant:STAGING_and_LOCAL',
'ngconstant:PROD',

JSHint does not allow double quotes.

Currently we've configured our projects using grunt-ng-constant, but everything is hard coded into our gruntfile.js file. Is it possible or are there plans in the future to implement a way to pull the constants from a .json file?

We could write a custom script to fix this issue, but I just wanted to see if there were plans to address this issue in the future.

Cheers!

Shawn Shaw

This is a meta task for organising some work to do:

• Remove jsbeautify, this is a redundant functionality that can be replace with grunt-jsbeautifyer
• Move all serializer dependent options to the options.serializer parameter
• Add the 'use strict' to the default wrapper
• Switch from double to single quotes when possible
• Switch from the default JSON module to JSON5 or another serializer that support single quoted output.
• Define behaviour on empty options
• Update Readme

Please update it to version >= 3

node_modules/grunt-ng-constant requires lodash@'~2.4.1'

The docs illustrate using grunt.file.readJSON, but that will get called when running clean

Example: gruntfile.js

//...
grunt.initConfig ({
  "merge-json": {
    default: {
      src: ['client/src/**/*.validation.json'],
      dest: 'client/dist/assets/generated/app.validation.json'
    }
  },
  ngconstant: {
    options: {
      name: 'validation.constraints', //angular module name to be created
      dest: 'client/dist/assets/generated/validation.constraints.js',
      constants: {
        VALIDATION_CONSTRAINTS_CONFIG: grunt.file.readJSON('client/dist/assets/generated/app.validation.json')
      },
    },
    build: {}
  }
});

//....
//Multiple calls to clean to illustrate the 'Unable to read' ENOENT error
grunt.registerTask('default', ['clean','merge-json', 'ngconstant:build', 'clean', 'clean']);

I'm new to grunt and I'm unsure how to get around this.

Instead of:

angular.module('config', [])
.constant('title', 'grunt-ng-constant-beta')
.constant('debug', true)

I want to generate:

angular.module('config')
.constant('title', 'grunt-ng-constant-beta')
.constant('debug', true)

Thanks

Allow configuration without surrounding array:

ngconstant: {
  your_target: {
    // Your constant configuration goes here
  }
}

Awesome plugin btw. I'm using this in a project and it would be really useful to define some vars as .constants and some as .values. That way for the values you'd have a default that's created and you can update it after the app loads.

Let's say for example that I have two modules, dev and prod, and they are sharing most of the options, because they are mutually exclusive.

Right now I have to do something like this:

ngconstantCommon: {
  dest: '...',
  name: '...',
},

ngconstant: {
  options: {
    space: '  ',
  },
  dev: [
    {
      dest: '<%= ngconstantCommon.dest %>',
      name: '<%= ngconstantCommon.name %>',
      constants: {
        settings: {
          // ...
        }
      }
    }
  ],
  prod: [
    {
      dest: '<%= ngconstantCommon.dest %>',
      name: '<%= ngconstantCommon.name %>',
      constants: {
        settings: {
          // ...
        }
      }
    }
  ]
}

Is there a better way to achieve this?

I'd love to have something like this:

ngconstant: {
  options: {
    space: '  ',
    dest: '...',
    name: '...',
  },
  dev: [
    {
        constants: {
          settings: {
          // ...
        }
      }
    }
  ],
  prod: [
    {
      constants: {
        settings: {
          // ...
        }
      }
    }
  ]
}

Thanks! 😄

It's not possible to use neither "path_to_file" nor "function" values for constants keys.

In case of using a path the same path is later used as a key value. In case of using a function no value is put into the resulting file. Sample output when using function:

 angular.module("development", [])
 .constant("ENV", );

My config is like:

ngconstant: {
    // Common options
    options: {
        name: 'config'
    },
    // Environments
    development: {
        options: {
            "name": "development",
            "dest": '<%= build_dir %>/src/app/variables.js'
        },
        constants: {
            "ENV": 'dev_env.json'
        }
    },
    production: {
        options: {
            "name": "production",
            dest: '<%= build_dir %>/src/app/variables.js'
        },
        constants: {
            "ENV": function () {return 'prod_env.json'}
        }
    }
},

This basically means that no option defined here https://github.com/werk85/grunt-ng-constant#custom-options works for me. I tried 0.5.0 and latest master versions of the grunt-ng-constant.

Of course dev_env.json file exists and is properly picked up when I use directly grunt.file.readJSON('dev_env.json') but it's not what I need.

And also deprecate space in the documentation.

Trying this task I face an error:

"grunt ngconstant
Running "ngconstant:dev" (ngconstant) task
Warning: Cannot find module 'ejs' Use --force to continue.
Aborted due to warnings."

I follow documentation:

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

then add to my configuration:

ngconstant: {
dist: [
{
dest: 'dist/constants.js',
name: 'constants',
constants: {
package: grunt.file.readJSON('package.json')
}
}
]
},

then I launch:

grunt ngconstant

then I get an error:

"Running "ngconstant:dev" (ngconstant) task
Warning: Cannot find module 'ejs' Use --force to continue.
Aborted due to warnings."

Thank for help,

I'm getting this error running grunt ngconstant:dist. Tried everything but no luck. BTW I'm using load-grunt-config.

Running "ngconstant:dist" (ngconstant) task
Verifying property ngconstant.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "ngconstant.dist" missing. Used --force, continuing.

Done, but with warnings.

dist.js file👇

ngconstant: {
    options: {
        name: 'app.constants',
        dest: 'app/app.constants.js',
        wrap: '\'use strict\';\n\n{%= __ngModule %}',
        constants: {
            APP: {
                version: '1.1.9'
            },
        }
    },
    dist: {
        constants: {
            apiUrl: grunt.file.readJSON('config.production.json')
        }
    }
},

Error when I run grunt ngconstant:pro

A special character was detected in this template. Inside template tags, the \n and \r special characters must be escaped as \n and \r. (grunt 0.4.0+)

Using the wrap: true option results in the module being wrapped in

(function(angular, undefined) {
    ...
})(angular);

Passing undefined as an argument conflicts with best practices and the no-shadow-restricted-names rule in ESLint. This should not be the default behavior of wrap: true in my opinion.

https://eslint.org/docs/rules/no-shadow-restricted-names

A workaround for now is defining my own wrap function.

Hey,

I just had the case where I would read from a file with constants and rewrite them on change. The thing is, if you specify grunt.file.readJSON('file.json'), it only reads on the first execution of Grunt.

So naturally I forked it and made functions possible. Now I can specify function() { return grunt.file.readJSON('file.json'); } and this function get's called on every task execution, so we always have the latest data.

Is this something you want in your project?

Just found this, and its exactly what i needed, but i'm not sure the right way to use it for the grunt build vs grunt server.

In my case in my index.html file

I might refer to it like

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

And of course config.js is the generated file.

There are two version one, for when i'm running grunt server and one for when i'm building for production.

Here is my config:

ngconstant: {
      options:{
        name: 'sgApp',
        deps:false
      },
      dist: {
        options:{
          dest: "client/scripts/global/config.js",
        },

        constants: "client/config/dist.config.json"
      },
      server: {
        options: {
          dest: ".tmp/scripts/global/config.js",
          values: {
            debug: true
          }
        },

        constants: "client/config/server.config.json"
      }
    },

The only way i could make the compiler concact it was if i had it build the config file and stick it in my code base, but in reality i want the your plugin to stick it in tmp and then have concat reference that .tmp version.

FYI its working great for grunt server.

I'm already using it as the configuration in the javascript source file.
I'm interested to use the same configuration result for some other grunt tasks.

E.g. similar as to load grunt.config('my_var');
could I access the ngcontrant.config('my_var') inside the grunt script?

I'm using grunt-ng-constant 0.4.7 with grunt 0.4.1, when I run ngconstant task I get this error:

A special character was detected in this template. Inside template tags, the
\n and \r special characters must be escaped as \n and \r. (grunt 0.4.0+)
Warning: An error occurred while processing a template (Unexpected token ILLEGAL). Use --force to continue.

I found the problem in this lines:

If is not necesary, is posible to remove?

Thanks!

Hey,

When I try to do this:

 constants: {
  'a.aaa': {
   a:'a'
  },
}

it works perfectly.

But, when I try this:

 constants: {
  'fa': function(input) {
    return input+1;
  },
  object: {
    process: function(a) {
      return a-1;
    }
  }
}

in both cases, function is ignored and the object become empty, resulting on a code like:

.constant('a.aaa', {a:'a'} )
.constant('fa', )
.constant('object', {} )

The ngConstant process don't even give me an error message.

It seems that functions are missing in process.

Tks,

Probably options.deps should be false by default.

Your version 0.5.0 release on npm doesn't have the latest commits (with JS beautify options) in it.

Example:

ngconstant: {
  dist: {
    dest: 'dist/constants.js',
    name: 'constants',
    constants: {
      package: undefined
    }
  }
}

• yeoman integration
• Generell recommendation not to hint generated code.

Using module v0.4.5.

Here is the task config:

ngconstant: {
      options: {
        space: '  '
      },
      development: {
        constants: { API_CONFIG: { baseUrl: 'http://localhost:8080/api' } },
        dest: 'source/js/env-config.js',
        name: 'environment-config',
        wrap: 'define(["angular"], function (angular) {\n"use strict";\n<%= __ngModule %>});'
      }

And this is grunt output:

Verifying property ngconstant.development exists in config...OK
Files: -> source/js/env-config.js
Reading /../node_modules/grunt-ng-constant/tasks/constant.tpl.ejs...OK
Warning: An error occurred while processing a template (Cannot read property 'js' of undefined). Use --force to continue.

Appreciate your help.

Hi,

I followed a tutorial @ http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/

My grunt config looks like:

grunt.initConfig({
  ngconstant: {
      options: {
        space: '  ',
      },
      // Environment targets
      dev: [{
        dest: '<%= yeoman.app %>/scripts/config.js',
        name: 'config',
        wrap: '"use strict";\n\n <%= __ngModule %>',
        constants: {
          ENV: {
            name: 'dev',
            apiurl: 'http://localhost:8000'
          }
        }
      }],
      prod: [{
        dest: '<%= yeoman.dist %>/scripts/config.js',
        name: 'config',
        wrap: '"use strict";\n\n <%= __ngModule %>',
        constants: {
          ENV: {
            name: 'prod',
            apiUrl: '...'
          }
        }
      }]
    }

...

and

grunt.registerTask('serve', function(target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'ngconstant:dev',
      'bower-install',
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);
  });

What I get once I run grunt serve is:

Running "ngconstant:dev" (ngconstant) task
Creating module undefined at undefined...Warning: Unable to write "undefined" file (Error code: undefined). Use --force to continue.

The task is correctly detected but I guess the problem is with generated content.

Any hint?

Hi,

I would like to know will the config file be built in main js file or will be inserted in index.html file?
Hope to receive your kindly reply soon.
Thanks a lot!

I'm not able to setup this module.
I've tried several examples from the README.md and they do not work for me too.

No matter which config I have in my gruntfile, I get the following error:
Warning: An error occurred while processing a template (Cannot read property 'type' of undefined).� Use --force to continue.

Thanks,
Das Einhorn

See #15 for details.

I am getting an exception when I run my grunt task in verbose mode:

Running "ngconstant:override" (ngconstant) task
Verifying property ngconstant.override exists in config...OK
Warning: Object # has no method 'indexOf' Use --force to continue.

Aborted due to warnings.

I can continue with the --force option. But that is not always desirable for other grunt tasks.

My grunt tasks is setup as

ngconstant: {
    options: {
      space: '  ',
      constants: {
          'CONSTANTS' : grunt.file.readJSON('src/configurations/default.json')
      }
    },

    // targets
    override: [{
      dest: '<%= build_dir %>/configuration.js',
      name: 'TestConfig',
      constants: {
          CONSTANTS : grunt.file.readJSON(  'src/configurations/' + environment + '/configuration_override.json')
      }
    }]
},

Is there anything special with my task or could it be inside the json file?

does it allow to support function type as follows:

{
"jst": function(key){ return (typeof key == 'undefined') ? window['JST'] : window['JST']key;},
}

I've got the following configuration:

    ngconstant: {
      options: {
        space: '  '
      },
      development: [{
        dest: '<%= yeoman.app %>/scripts/env-config.js',
        wrap: '"use strict";\n\n <%= __ngModule %>',
        name: 'envConfig',
        constants: grunt.file.readJSON("config/development.json")
      }],
      staging: [{
        dest: '<%= yeoman.app %>/scripts/env-config.js',
        wrap: '"use strict";\n\n <%= __ngModule %>',
        name: 'envConfig',
        constants: grunt.file.readJSON("config/staging.json")
      }],
      production: [{
        dest: '<%= yeoman.app %>/scripts/env-config.js',
        wrap: '"use strict";\n\n <%= __ngModule %>',
        name: 'envConfig',
        constants: grunt.file.readJSON("config/production.json")
      }]
    }

The first 3 options are the same for all targets, however, moving them up to common config doesn't set them on target configs.

I have this external json file:

{
  "development": {
    "BACKEND_URL": "http://127.0.0.1:9000"
  },
  "production": {
    "BACKEND_URL": "http://localhost:9000"
  }
}

an this ngConstant configuration:

ngconstant: {
      options: {
        name: 'config',
        beautify: true,
        dest: '<%= yeoman.app %>/scripts/config.js',
        space: '  '
      },
      // targets
      development: {
        wrap: '\'use strict\';\n\n <%= __ngModule %>',
        constants: {
          ENV: 'development',
          // Define the backend URL.
          BACKEND_URL: grunt.file.readJSON('<%= yeoman.app %>/config.json').development.BACKEND_URL
        }
      },
      production: {
        wrap: '"use strict";\n\n <%= __ngModule %>',
        constants: {
          ENV: 'production',
          // Define the backend URL.
          BACKEND_URL: grunt.file.readJSON('<%= yeoman.app %>/config.json').production.BACKEND_URL
        }
      }
    }

I want to fill the property BACKEND_URL from a property of the external json file, but doesn't works

Maybe, it's possible to configure a source file to extract this configuration.

ngconstant: {
      options: {
        name: 'config',
        beautify: true,
        src: '<%= yeoman.app %>/config.json',
        dest: '<%= yeoman.app %>/scripts/config.js',
        space: '  '
      },
      ...
}

What do you think?