Конкатенирование и минимизация RequireJS с Grunt

Question

У меня есть проект, написанный на CoffeeScript, который использует AngularJS. Мои поставщика зависимостей устанавливаются с помощью Бауэр и моя файловая структура, как это:

- 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' 

A Теперь все работает отлично! ~~ Стыдно, что я должен сказать 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'Oh!

Answer 2

От r.JS документ

https://github.com/jrburke/r.js/blob/master/build/example.build.js#L322

Вложенные зависимости могут быть объединены в requireJS> v1.0.3

//Finds require() dependencies inside a require() or define call. By default 
//this value is false, because those resources should be considered dynamic/runtime 
//calls. However, for some optimization scenarios, it is desirable to 
//include them in the build. 
//Introduced in 1.0.3. Previous versions incorrectly found the nested calls 
//by default. 
findNestedDependencies: false,