Wie man CSS-Dateien mit RequireJS minimiert

Ich habe ein Backbone-Projekt mit mehreren JS-Dateien und ein paar CSS-Dateien

Ich möchte, dass sie auf ein einzelnes js und ein einzelnes css reduziert werden

Bisher konnte ich alle meine js-Dateien zu einer einzigen main.min.js verketten und minimieren

Jetzt versuche ich, dasselbe mit den CSS-Dateien zu tun

das ist mein layout:

css
  bootstrap.css
  docs.css
  ...
js
  optimize-node (script to run the optimizer)
  app
    main.js (entry point of my app)
    require-main.js
index.html

Dies ist mein Skript, um es zu minimieren

# optimize-node
node ../../r.js -o baseUrl=. mainConfigFile=app/require-main.js

Das ist meine require-main.js

/*globals require*/
'use strict';
// Set the require.js configuration file for your application
require.config({

  // uncomment to create a single file with no optimization at all
  // optimize: 'none',
  baseUrl: 'js',

  // Initialize the application with the main application file
  deps : ['app/main'],

  preserveLicenseComments: false,

  out  : 'main.min.js',
  name : 'app/main',

  paths: {
    // Embed require in main.min
    'requireLib' : 'lib/require.min',

    // Libraries
    jquery       : 'lib/jquery-1.10.1',
    jqueryui     : 'lib/jquery-ui-1.8.21.custom',
    moment       : 'lib/moment-2.0.0',
    datepicker   : 'lib/bootstrap-datepicker-1.0.1',

    [...]
  },
  include : ['requireLib'],
  shim: {
    lodash: {
      exports: '_'
    },
    backbone: {
      deps    : ['lodash', 'jquery'],
      exports : 'Backbone'
    },
    [...]
  }
});

Mit dieser Konfiguration funktioniert beim Ausführen von Optimize-Node alles einwandfrei und es wird eine js / app / main.min.js-Datei generiert

Jetzt versuche ich, die Konfiguration zu ändern, um diese Datei und auch eine css / main.min.css-Datei mit dem Inhalt von css / *. Css zu generieren, die verkettet und minimiert ist

Ich habe versucht, diese Zeilen zu ersetzen

// single file optimization
out  : 'main.min.js',
name : 'app/main',

Mit dieser Konfiguration können zwei Module definiert werden, eines für das js und eines für das css

// multiple file optimization
dir: '../../build',
appDir: '../',
modules: [
  {
    name: 'app/main',
    include: ['app/main']
  }
],

Aber es funktioniert nicht wie erwartet

Mein gesamtes Projekt wird nach ../../build kopiert und jede Datei wird optimiert

Und ich weiß nicht, wie ich ein weiteres Modul hinzufügen soll, das nur die CSS-Dateien auswählt

Vielleicht sollte ich eine require-css.js-Datei erstellen, die sich nur um css / *. Css-Dateien kümmert

Kann mir jemand dabei helfen? Ich denke, es sollte ein ziemlich verbreitetes Szenario sein

Antworten auf die Frage(4)

Ihre Antwort auf die Frage