用Yeoman构建第二个javascript文件

jas*_*ero 4 javascript gruntjs yeoman

我正在尝试在我的项目中使用yeoman,并且在尝试使用Grunt构建它时我遇到了一个问题:

我有一个application.js,它是应用程序使用的主要文件,使用require.js.运行Grunt构建后,js文件在dist文件夹中创建,连接和缩小.

问题是当我尝试创建第二个javascript文件(例如application2.js)以在应用程序的另一个页面中使用时.运行Grunt后,文件被创建但是为空.我尝试使用与工作中相同的js来排除一些js或require.js问题,但是是相同的.

我唯一可以想到的是,Grunt中的某个地方被配置为仅处理该文件,实际上在运行时我可以在控制台中看到以下内容:

Found a block:
    <!-- build:js scripts/application.js -->
    <script data-main="scripts/application" src="components/requirejs/require.js"></script>
    <!-- endbuild -->
Updating config with the following assets:
    - dist/scripts/application.js

Found a block:
    <!-- build:js scripts/application2.js -->
    <script data-main="scripts/application2" src="components/requirejs/require.js"></script>
    <!-- endbuild -->
Updating config with the following assets:
    - dist/scripts/application2.js

Configuration is now:

  cssmin:
  { dist: {} }

  concat:
  { 'dist/scripts/application.js': [ 'dist/scripts/application.js' ],
  'dist/scripts/vendor/modernizr.js': [ 'app/components/modernizr/modernizr.js' ],
  'dist/scripts/application2.js': [ 'dist/scripts/application2.js' ] }

  uglify:
  { 'dist/scripts/application.js': 'dist/scripts/application.js',
  'dist/components/requirejs/require.js': 'app/components/requirejs/require.js',
  'dist/scripts/vendor/modernizr.js': 'dist/scripts/vendor/modernizr.js',
  'dist/scripts/application2.js': 'dist/scripts/application2.js' }

  requirejs:
  { dist:
   { options:
      { baseUrl: 'app/scripts',
        optimize: 'none',
        preserveLicenseComments: false,
        useStrict: true,
        wrap: true,
        uglify2: {},
        name: 'application',
        out: 'dist/scripts/application.js',
        mainConfigFile: 'app/scripts/application.js' } } }

Running "requirejs:dist" (requirejs) task
>> RequireJS optimizer finished
Uncompressed size: 1361156 bytes.
Compressed size: 304370 bytes gzipped.
Run Code Online (Sandbox Code Playgroud)

Concat和Uglify任务引用第二个javascript文件,但是requirejs.我尝试更改属性"mainConfigFile",包括两者,但它一直被覆盖......

有任何想法吗??

She*_*rip 5

我首先好奇你为什么要在你的yeoman系统中定义多个应用程序文件?这是针对多个HTML页面,我猜?或者你有两个:

<script data-main="..." src="components/requirejs/require.js"></script> 
Run Code Online (Sandbox Code Playgroud)

在一个HTML文件中?

至于对此的修复:mainConfigFile是使用'out'参数生成的,因此设置它将不起作用.

您的requirejs部分需要每个文件的"dist"部分.他们还需要手动指定名称和输出.不确定这是一个错误或预期的行为.

requirejs: {
   dist1: {
      options: {
         name: 'application', out: 'dist/scripts/application.js',
         ...}
   },
   dist2: {
      options: {
         name: 'application2', out: 'dist/scripts/application2.js',
         ...
Run Code Online (Sandbox Code Playgroud)

您还需要添加两个单独的HTML文件以使用minPrepare,但看起来您已经这样做了或者您正在一个HTML文件中引用应用程序和application2(不确定在一个html文件中两个requirejs配置的后果是什么) .

    useminPrepare: {
        html: ['<%= yeoman.app %>/index.html','<%= yeoman.app %>/index2.html'],
        options: {
            dest: '<%= yeoman.dist %>'
        }
    },
Run Code Online (Sandbox Code Playgroud)

对于后代,我还将两个脚本添加到bower配置中,但我无法100%确定它甚至是重要的:

    bower: {
        all: {
            rjsConfig: ['<%= yeoman.app %>/scripts/application.js','<%= yeoman.app %>/scripts/application2.js']
        }
    }
Run Code Online (Sandbox Code Playgroud)

这是我得到的配置输出:http://pastie.org/7321492

  • 这就像一个魅力!我很困惑,因为没有看到任何地方,自耕农如此专注于单页应用程序.我甚至都不知道第一个js"application.js"是由Yeoman在Grunt中定义的,因为我偶然也称我的主js文件为"application.js" (2认同)