Verketten und Verkleinern von RequireJS mit Grunt

Question

Ich habe ein Projekt in CoffeeScript geschrieben, die AngularJS verwendet. Mein Anbieter Abhängigkeiten installiert verwenden Bower und meine Dateistruktur ist wie folgt:

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

Was ich versuche zu tun, die folgenden:

1. Ich versuche, herauszufinden, wie ich verwenden kann, RequireJS r.js, um meine app-Dateien zu optimieren, so dass ich im Wesentlichen eine verkettete Datei erhalten alle gut sortiert (so Hersteller Abhängigkeiten, meine Konfiguration und Routen, und sie meine app-Dateien).
2. Integrieren Sie dies in meine Grunt-Datei.

Ich habe versucht, die r.js optimiser verwenden, aber vielleicht hab ich es doch sehr dumm, wie alle es zu tun scheint, ist meine App-Dateien (minus die Kreditoren Abhängigkeiten) in den dist-Ordner kopieren; Es gelingt jedoch, die coffee generierten js Dateien zu optimieren.

Hat jemand irgendwelche Erfahrungen damit?

Answer 1

ich es herausgefunden: r.js Arbeiten von Ihren mainConfigFile und alle Module lesen Sie in Ihrer Konfiguration nennen, hier die wichtige Anmerkung ist, dass r.js nur beim ersten sie require/define in Ihrem Namen Module und geht zu suchen sieht; so zum Beispiel ich eine benannte Modul app genannt hatte:

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] 

Das Problem dabei war, dass r.js nie über die erste require Aussage bekam und somit wurde die Verkettung funktioniert nicht. Als ich das geändert, sagen (mein app.coffee):

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

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

Und mein 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] 

Dies bedeutete, dass ich nur angular und bootstrap in meiner r.js Konfiguration als includes definieren benötigt und dann r.js würde den Rest tun, wie folgt:

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

A Und jetzt funktioniert alles gut! ~~ Es ist eine Schande, dass ich r.js sagen requirejs obwohl aufzunehmen, vielleicht habe ich etwas dumm da getan? ~~

Blimey, Ich bin so ein Ding!

Also in meinem HTML ich als meine verkettete Skript geladen wurde:

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

Wenn es wirklich sollte wie folgt geladen werden:

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

D'oh!

Answer 2

Von r.js doc

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

Verschachtelte Abhängigkeiten in requireJS gebündelt werden können> 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,