【问题标题】:grunt-ng-constant is not producing config scriptgrunt-ng-constant 没有生成配置脚本
【发布时间】:2015-11-10 23:37:37
【问题描述】:

我正在尝试在我的 AngularJS 中使用环境变量来进行特定于环境的配置。我正在使用使用 Grunt 的 Yeoman 工作流程,而 grunt-ng-constant 插件据称可以帮助进行特定于环境的配置。在关注这个tutorial 时,我相应地设置了我的Gruntfile,但是当我在控制台中运行grunt serve 时,config.js 没有写入/app/scripts/。没有config.js,我无法将环境变量注入到角度应用程序中。

这是我的Gruntfile的sn-p:

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'
        ]);
    });

    ...

生成的是与 Gruntfile 位于同一目录 (client) 中的 /.sass-cache/.tmp

我的应用文件结构:

【问题讨论】:

  • 'ngconstant:development' 移动到'autoprefixer:server', 旁边,使其位于连接和观看任务之前。不要忘记添加逗号!然后,通过更改 appConfig 来修改应用程序的路径,使其看起来像 this
  • 有什么结果吗?
  • @Lucio 是的,您的解决方案有效。谢谢!
  • 移至答案中,以便在您标记为已接受后关闭此问题。谢谢

标签: javascript angularjs node.js gruntjs environment-variables


【解决方案1】:

ngconstant 任务没有被调用,因为它在 watch 任务之后。修改运行块,使'ngconstant:development' 位于'autoprefixer:server', 旁边,因此它位于连接和监视任务之前。不要忘记添加逗号!

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

另外,bower.json 文件中的应用路径可能有误。可以肯定的是,通过更改 appConfig 来修改应用程序的路径,使其看起来像这样:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-06-30
    • 1970-01-01
    • 1970-01-01
    • 2014-12-17
    • 2013-05-09
    • 1970-01-01
    • 2013-01-16
    相关资源
    最近更新 更多