3

是否有其他人Grunt用作EmberWeb 应用程序的构建工具并且正在经历与我相同的行为?此时,我正在使用版本中的框架,RC3我可以毫不费力地使用我的构建工具并导入所有必要的库,对它们进行丑化和压缩,一切都像魅力一样。

无论如何,至少因为Ember 不再能够识别 Handlebars,Ember RC5所以我不能再使用它Grunt来构建我的应用程序了!. 它总是抱怨,然后它说这导致我假设没有识别包含的库。Ember Handlebars requires Handlebars version 1.0.0-rc.4. Include a SCRIPT tag in the HTML HEAD linking to the Handlebars file before you link to Ember.Cannot read property 'COMPILER_REVISION' of undefinedEmberHandlebars

除了对 js 文件的引用(使用 Ember RC5/6 而不是 RC3 和 Handlebars RC4 而不是 RC3)之外,我没有更改我的任何内容app.js(库/框架的顺序不变)。但似乎有些东西打破了Ember.Handlebars从那时起的初始化......

我在这里有什么问题吗?有没有解决方案让我可以继续Grunt用作构建工具?


编辑

这是我的Gruntfile.js

/*jshint camelcase: false */
/*global module:false */
module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    meta: {
      dev: {
        buildPath: '.'
      },
      prod: {
        buildPath: '.'
      }
    },

    /*
     Task for uglifyng the application javascript file in production environment
     */
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      prod: {
        files: [
          {
            src: '<%= meta.prod.buildPath %>/js/application.js',
            dest: '<%= meta.prod.buildPath %>/js/application.min.js'
          }
        ]

      }
    },

    /*
     Task for creating css files out of the scss files
     */
    compass: {
      prod: {
        options: {
          environment: 'production',
          noLineComments: true,
          outputStyle: 'expanded',
          cssDir: '<%= meta.prod.buildPath %>/css',
          fontsDir: '<%= meta.prod.buildPath %>/fonts',
          imagesDir: '<%= meta.prod.buildPath %>/images',
          javascriptsDir: '<%= meta.prod.buildPath %>/js'
        }
      },
      dev: {
        options: {
          environment: 'development',
          noLineComments: false,
          outputStyle: 'expanded',
          cssDir: '<%= meta.dev.buildPath %>/css',
          fontsDir: '<%= meta.dev.buildPath %>/fonts',
          imagesDir: '<%= meta.dev.buildPath %>/images',
          javascriptsDir: '<%= meta.dev.buildPath %>/js'
        }
      }
    },

    /*
     Task to minify all css files in production mode.
     All css files will end with '.min.css' instead of
     just '.css'.
     */
    cssmin: {
      minify: {
        expand: true,
        cwd: '<%= meta.prod.buildPath %>/css/',
        src: ['*.css', '!*.min.css'],
        dest: '<%= meta.prod.buildPath %>/css/',
        ext: '.min.css'
      }
    },

    /*
     Clean up the production build path
     */
    clean: {
      cssd: ['<%= meta.prod.buildPath %>/css/**/*']
    },


    /*
     A simple ordered concatenation strategy.
     This will start at app/app.js and begin
     adding dependencies in the correct order
     writing their string contents into 'application.js'

     Additionally it will wrap them in evals
     with @ sourceURL statements so errors, log
     statements and debugging will reference
     the source files by line number.

     This option is set to false for production.
     */
    neuter: {
      prod: {
        options: {
          includeSourceURL: false
        },
        files: [
          {
            src: 'app/app.js',
            dest: '<%= meta.prod.buildPath %>/js/application.js'
          }
        ]
      },
      dev: {
        options: {
          includeSourceURL: true
        },
        files: [
          {
            src: 'app/app.js',
            dest: '<%= meta.dev.buildPath %>/js/application.js'
          }
        ]
      }
    },

    /*
     Watch files for changes.

     Changes in dependencies/ember.js or application javascript
     will trigger the neuter task.

     Changes to any templates will trigger the ember_templates
     task (which writes a new compiled file into dependencies/)
     and then neuter all the files again.
     */
    watch: {
      application_code: {
        files: ['js/dependencies/ember.js', 'app/**/*.js'],
        tasks: ['neuter:dev']
      },
      compass: {
        files: [
          'styles/**/*.scss'
        ],
        tasks: ['compass:dev']
      }
    },

    /*
     Runs all .html files found in the test/ directory through PhantomJS.
     Prints the report in your terminal.
     */
    qunit: {
      all: ['test/**/*.html']
    },

    /*
     Reads the projects .jshintrc file and applies coding
     standards. Doesn't lint the dependencies or test
     support files.
     */
    jshint: {
      all: ['Gruntfile.js', 'app/**/*.js', 'test/**/*.js', '!js/dependencies/*.*', '!test/support/*.*'],
      options: {
        jshintrc: '.jshintrc'
      }
    },

    /*
     Generate the YUI Doc documentation.
     */
    yuidoc: {
      name: '<%= pkg.name %>',
      description: '<%= pkg.description %>',
      version: '<%= pkg.version %>',
      options: {
        paths: '<%= meta.dev.buildPath %>/app/',
        outdir: '<%= meta.dev.buildPath %>/yuidocs/'
      }
    },

    /*
     Find all the <whatever>_test.js files in the test folder.
     These will get loaded via script tags when the task is run.
     This gets run as part of the larger 'test' task registered
     below.
     */
    build_test_runner_file: {
      all: ['test/**/*_test.js']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-neuter');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-yuidoc');

  /*
   A task to build the test runner html file that get place in
   /test so it will be picked up by the qunit task. Will
   place a single <script> tag into the body for every file passed to
   its coniguration above in the grunt.initConfig above.
   */
  grunt.registerMultiTask('build_test_runner_file', 'Creates a test runner file.', function () {
    var tmpl = grunt.file.read('test/support/runner.html.tmpl');
    var renderingContext = {
      data: {
        files: this.filesSrc.map(function (fileSrc) {
          return fileSrc.replace('test/', '');
        })
      }
    };
    grunt.file.write('test/runner.html', grunt.template.process(tmpl, renderingContext));
  });

  /*
   A task to run the application's unit tests via the command line.
   It will
   - convert all the handlebars templates into compile functions
   - combine these files + application files in order
   - lint the result
   - build an html file with a script tag for each test file
   - headlessy load this page and print the test runner results
   */
  grunt.registerTask('test', ['neuter', 'jshint', 'build_test_runner_file', 'qunit']);

  /*
   Configures all tasks which will be executed with production setup
   */
  grunt.registerTask('prod_tasks', ['clean', 'compass:prod', 'cssmin', 'neuter:prod', 'uglify:prod']);

  /*
   Setup for the production build. Sets the production build path.
   */
  grunt.registerTask('prod', 'Production Build', function () {
    grunt.task.run('prod_tasks');
  });

  /*
   Configures all tasks which will be executed with development setup
   */
  grunt.registerTask('dev_tasks', ['compass:dev', 'neuter:dev', 'watch']);

  /*
   Setup for the development build. Sets the development build path.
   */
  grunt.registerTask('dev', 'Development Build', function () {
    grunt.task.run('dev_tasks');
  });

  // Default task
  grunt.registerTask('default', 'dev');

  /*
   Configures all tasks which will be executed with doc setup
   */
  grunt.registerTask('doc_tasks', ['yuidoc']);

  /*
   Setup for the YUI doc generation.
   */
  grunt.registerTask('doc', 'Generate YuiDoc Documentation for the App', function () {
    grunt.task.run('doc_tasks');
  });

};

编辑 2

我从 Ember.js 网站的入门工具包中获取ember-1.0.0-rc.6.jshandlebars-1.0.0-rc.4.js文件,并尝试在其上运行 Grunt 任务。这是 Chrome 告诉我的: Ember RC6 在 Grunt Buildstep 上的把手问题


编辑 3

以防万一有人关心,这里是 Ember.js Github页面上提出的问题的链接:https ://github.com/emberjs/ember.js/issues/2894


编辑 4

Handlebars最后,正如@Tao 在他的回答中所报告的那样,该问题被确定为在处理全球出口时存在不一致。如果您想关注,这里是 GitHub 上问题的链接:https ://github.com/wycats/handlebars.js/issues/539

4

2 回答 2

2

看起来这个问题正在下一版本的 Handlebars 中得到解决:https ://github.com/wycats/handlebars.js/issues/539 请继续关注。

于 2013-07-07T18:38:06.443 回答
1

用于编译Handlebars模板的版本与通过 script 标签包含的版本不匹配。

如果您使用grunt-contrib-handlebars,它使用 npm 模块把手来编译模板。车把模块/项目独立于 Ember,并且有自己的修订版,可能与 Ember 兼容,也可能不兼容。

为了保持与车把的兼容性,Ember 需要特定版本的车把,它会警告您。

这里棘手的部分是您需要确保grunt-contrib-handlebars强制使用该特定版本的车把。

解决方案1:使用shrinkwrap更改grunt-contrib-handlebars 的handlebars 依赖版本。

解决方案2:这是我目前正在使用的。我已切换到Emblem。标志 grunt 任务明确要求您的车把文件,因此您不必下拉到节点子依赖管理。并且您的构建将相同的文件包含在您的脚本标签中,从而避免了未来修订的重复/不匹配。

编辑:在 Gruntfile 编辑之后

看着 Gruntfile 我没有发现任何问题。看起来像一个标准的构建过程js -> neuter -> (if prod) -> uglify等。

我认为您需要尝试刷新 emberjs 和 handlebars js 文件。尝试使用入门工具包本身的文件,这些文件肯定可以一起使用。

并通过查看 Chrome/Inspector 中的未压缩源来验证您的 index.html。Handlebars 在横幅下方有修订号,例如Handlebars.VERSIONHandlebars.COMPILER_REVISION。将那些与您在 ember.js 文件中看到的内容相匹配,该文件@submodule ember-handlebars-compiler位于Ember.assert.

于 2013-06-24T15:19:33.020 回答