javascript - 使用 Yeoman 构建第二个 javascript 文件

Question

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

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

问题是当我尝试创建第二个 javascript 文件(例如 application2.js)以在应用程序的另一个页面中使用时。运行 Grunt 后，文件已创建但为空。我尝试使用与排除某些 js 或 require.js 问题时相同的 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.

Concat 和 Uglify 任务引用第二个 javascript 文件，但 requirejs.我尝试更改属性“mainConfigFile”以包含两者，但它不断被覆盖...

有什么想法吗？？

Answer 1

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

<script data-main="..." src="components/requirejs/require.js"></script> 

在单个 HTML 文件中？

至于解决这个问题:mainConfigFile 是使用“out”参数生成的，因此在这里设置它不起作用。

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

requirejs: {
   dist1: {
      options: {
         name: 'application', out: 'dist/scripts/application.js',
         ...}
   },
   dist2: {
      options: {
         name: 'application2', out: 'dist/scripts/application2.js',
         ...

您还需要将两个单独的 HTML 文件添加到 useminPrepare，但看起来您已经完成了，或者您在一个 HTML 文件中引用了 application 和 application2(不确定一个 html 文件中的两个 requirejs 配置的后果是什么会是)。

    useminPrepare: {
        html: ['<%= yeoman.app %>/index.html','<%= yeoman.app %>/index2.html'],
        options: {
            dest: '<%= yeoman.dist %>'
        }
    },

为了后代，我还将这两个脚本添加到 bower 配置中，但我不能 100% 确定它是否重要:

    bower: {
        all: {
            rjsConfig: ['<%= yeoman.app %>/scripts/application.js','<%= yeoman.app %>/scripts/application2.js']
        }
    }

这是我生成的配置输出:http://pastie.org/7321492