用Grunt连接和缩小RequireJS

Question

我有一个用CoffeeScript编写的项目,它使用AngularJS.我的供应商依赖是使用Bower安装的,我的文件结构如下:

- assets
 - js
  - app
   - model
    - *.coffee
   - factory
    - *.coffee
   ...
   - app.coffee
   - config.coffee
   - routes.cofeee
  - vendor
   - angular
   - lodash
   ...
  - dist

我想要做的是以下内容:

1. 我正在尝试弄清楚如何使用RequireJS r.js来优化我的应用程序文件,这样我基本上得到一个所有有序的连接文件(所以供应商依赖,我的配置和路由,以及他们我的应用程序文件).
2. 将其集成到我的Grunt文件中.

我已经尝试过使用r.js优化器,但也许我太傻了,因为它似乎只是将我的应用程序文件(减去供应商的依赖性)复制到dist文件夹中; 但是,它确实可以优化coffee生成的js文件.

有没有人有这方面的经验？

Answer 1

我想通了:r.js通过阅读你mainConfigFile在配置中命名的模块和任何模块来工作,这里重要的注意事项是r.js只查看你命名的模块中的第一个require/ define内部,然后寻找它们; 所以,例如,我有一个名为的模块app:

require ['config'], (cfg) ->
  require ['angular'], (A) ->
    A.module cfg.ngApp, []

    require ['routes'], () ->
      require [
        'factory/a-factory',

        'service/a-service',

        'controller/a-controller'
      ], () ->
        A.bootstrap document, [cfg.ngApp]

这里的问题是,r.js从未超过第一个require语句,因此连接不起作用.当我改变它时,说(我的app.coffee):

require ['config'], (cfg) ->
  require ['angular'], (A) ->
    A.module cfg.ngApp, []

    require ['bootstrap'], (bootstrap) ->
      bootstrap()

我的bootstrap.coffee:

define [
  'config',
  'angular',
  'routes',

  'factory/a-factory',

  'service/a-service',

  'controller/a-controller'
], (cfg, A, routes) ->
  class Bootstrap
    constructor: () ->
      routes()

      A.bootstrap document, [cfg.ngApp]

这意味着我只需要定义angular和bootstrap在我r.js的配置includes,然后r.js将完成剩下的,就像这样:

baseUrl: 'assets/js/app',
mainConfigFile: 'assets/js/app/config.js',
name: 'app',
include: [
  '../vendor/requirejs/require',
  'bootstrap'
],
out: 'assets/js/dist/app.js'

现在一切正常!~~虽然我不得不说r.js,这是一种耻辱requirejs,也许我在那里做了些傻事？~~

Blimey,我真是个dingus!

所以在我的HTML中我加载了我的连接脚本:

<script src="assets/js/dist/app.js"></script>

什么时候它应该像这样加载:

<script src="assets/js/vendor/requirejs/require.js" data-main="assets/js/dist/app"></script>

D'哦!