Concatenazione e modifica di RequireJS con Grunt

Question

Ho un progetto scritto in CoffeeScript che utilizza AngularJS. Le mie dipendenze vendor vengono installati utilizzando Bower e la mia struttura del file è come questo:

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

Quello che sto cercando di fare è la seguente:

1. Sto cercando di capire come posso usare RequireJS's r.js per ottimizzare i miei file di app in modo da ottenere essenzialmente un file concatenato tutto ordinato (dipendenze dei fornitori, configurazione e percorsi e file della mia app).
2. Integrare questo nel mio file Grunt.

Ho provato con l'ottimizzatore r.js ma forse ho troppo stupido come tutti sembra fare è copiare i file app (meno le dipendenze del fornitore) nella cartella dist; tuttavia, riesce a ottimizzare i file js generati con 10.

Qualcuno ha qualche esperienza con questo?

Answer 1

ho capito: r.js lavori leggendo i tuoi mainConfigFile e ogni modulo è il nome entro la configurazione, la nota importante qui è che r.js guarda solo al primo require/define entro i moduli di nome e va a cercarli; così, per esempio, ho avuto un modulo di nome chiamato 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] 

Il problema qui è che r.js mai ha passato la prima require dichiarazione e, quindi, la concatenazione non funzionava. Quando ho cambiato questo, per dire (il mio app.coffee):

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

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

E il mio 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] 

Ciò significava che ho solo bisogno di definire angular e bootstrap nella mia configurazione r.js come includes e poi r.js farebbe il resto, in questo modo:

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

A e ora funziona tutto bene! ~~ E 'un peccato che devo dire r.js per includere requirejs però, forse ho fatto qualcosa di stupido lì? ~~

Accidenti, io sono un dingus!

Così nel mio HTML che stava caricando il mio script concatenati come:

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

quando in realtà dovrebbe essere caricato in questo modo:

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

D'oh!

Answer 2

Da r.js doc

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

dipendenze nidificate possono essere raggruppati in 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,