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