CODEWITHSUNDEEP
javascriptangularjsnode.jsgruntjsenvironment-variables
photon
photon

Reputation: 616

grunt-ng-constant is not producing config script

I'm trying to use environment variables in my AngularJS to do environment-specific configuration. I'm using the Yeoman workflow which uses Grunt, and the grunt-ng-constant plugin is purported to help with environment-specific configuration. In following this tutorial, I set up my Gruntfile accordingly, but when I run grunt serve in the console, config.js is not written into /app/scripts/. Without config.js, I cannot inject the environment variable into the angular application.

Here's a snippet of my Gruntfile:

module.exports = function (grunt) {

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Automatically load required Grunt tasks
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    ngtemplates: 'grunt-angular-templates',
    cdnify: 'grunt-google-cdn'
  });

  // Configurable paths for the application
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: '../server/dist'
  };

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-ng-constant');

  // Define the configuration for all the tasks
  grunt.initConfig({

    // Project settings
    yeoman: appConfig,

    ngconstant: {
      // options for all environments
      options: {
        space: '  ',
        wrap: '"use strict";\n\n {%= __ngModule %}',
        name: 'config'
      },

      // Development/Testing environment
      development: {
        options: {
          dest: '<%= yeoman.app %>/scripts/config.js'
        },
        constants: {
          ENV: {
            name: 'development',
            apiEndpoint: 'http://localhost:3000'
          }
        }
      },

      // Production environment
      production: {
        options: {
          dest: '<%= yeoman.dist %>/scripts/config.js'
        },
        constants: {
          ENV: {
            name: 'production',
            apiEndpoint: 'http://productionUrl'
          }
        }
      }
    },

    ...

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

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

    ...

What is generated is /.sass-cache and /.tmp in the same directory (client) as the Gruntfile.

My app file structure:

enter image description here

Upvotes: 3

Views: 2133

Answers (1)

Lucio
Lucio

Reputation: 5418

The ngconstant task is not being called because it is after the watch task. Modify the run block so the line 'ngconstant:development' is next to 'autoprefixer:server', so it is before connect & watch tasks. Don't forget to add a comma! 

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

Also, the app path might be wrong in the bower.json file. To be sure, modify the path to your app by changing appConfig so it looks like this:

var appConfig = {
  app: 'app',
  dist: '../server/dist'
}

Upvotes: 1

Related Questions