使用Yeoman构建第二个Javascript文件

Question

使用Yeoman构建第二个Javascript文件

4

我正在尝试在我的项目中使用yeoman，并且在使用Grunt构建时遇到了问题：

我有一个application.js文件，它是应用程序使用的主文件，使用require.js。运行Grunt build后，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.

Concat和Uglify任务都涉及到第二个JavaScript文件，但需要使用requirejs。我尝试更改属性"mainConfigFile"，以包括两个文件，但是它一直被覆盖... 有什么想法吗？

- jasalguero

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sheena Artrip · Accepted Answer

我首先很好奇你为什么要在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中，但看起来您已经完成了此操作OR您在一个HTML文件中引用了application和application2（不确定在一个HTML文件中使用两个requirejs配置文件的后果会是什么）。

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

为了后续记录，我还将这两个脚本添加到 bower 配置中，但我不能百分之百确定它是否重要。

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

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