Ausführliche Erläuterung der Schritte zum Zusammenführen und Komprimieren von CSS-Dateien mit r.js

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Zusammenführen und Komprimieren von CSS-Dateien mit RJS geben. Was sind die Vorsichtsmaßnahmen für das Zusammenführen und Komprimieren von CSS-Dateien mit RJS? Praktischer Fall, werfen wir einen Blick darauf.

So verwenden Sie r.js zum Zusammenführen und Komprimieren von CSS-Dateien. Erstellen Sie unter r5 einen neuen CSS-Ordner mit vier CSS-Dateien: main.css, nav.css, form.css, grid.css.

main.css ist die zusammengeführte Hauptdatei oder Konfigurationsdatei. Die zusammenzuführenden Dateien werden mit @import importiert. Wie folgt:

main.css

@importurl("nav.css");
@importurl("grid.css");
@importurl("form.css");

Die anderen drei sind gewöhnliche CSS-Dateien mit verschiedenen darin definierten Stilen. Hier wird kein Code gepostet. Hier werden wir die Befehlszeile verwenden, um diese vier Dateien zusammenzuführen und sie in r5/css/built.css zu generieren.

node r.js -o cssIn=css/main.css out=css/built.css

Wenn Sie zum Verzeichnis r5/css zurückkehren, finden Sie eine zusätzliche Datei „built.css“, die eine Zusammenführung von vier anderen CSS-Dateien ist.

Sie können auch die Parametereinstellungen von „optimizeCss“ verwenden, um Komprimierung und Komprimierungsoptionen zu konfigurieren. Die Werte von optimierenCss sind standard/none/standard.keepLines/standard.keepComments/standard.keepComments.keepLines.

keine Keine Komprimierung, nur Zusammenführen

Standard Standardkomprimierung entfernt Zeilenumbrüche, Leerzeichen und Kommentare

standard.keepLines Zusätzlich zur Standardkomprimierung Zeilenumbrüche bleiben erhalten

standard.keepComments Kommentare beibehalten, außer bei Standardkomprimierung

standard.keepComments.keepLines Zeilenumbrüche und Kommentare beibehalten, außer bei Standardkomprimierung

Beispiel:

node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard

Nach der Komprimierung befindet sich die gesamte build.css in einer Zeile.

Zusammenfassung:

1. Für nicht lokale Moduldateien, die nach Pfad konfiguriert sind, müssen Sie paths.xx=empty konfigurieren, wenn Sie r.js zum Zusammenführen und Komprimieren verwenden.

2. Verwenden Sie die Parameter „cssIn“ und „optimizeCss“, um CSS-Dateien zusammenzuführen und zu komprimieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Erklärung der Top-Floating-Fixed-Funktion beim Gleiten mit vue+jquery+lodash

Analyse der Schritte um die PopupWindow-Komponente in Vue zu verwenden

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum Zusammenführen und Komprimieren von CSS-Dateien mit r.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!