So minimieren Sie CSS- und JS-Dateien mit UglifyJS und UglifyCSS

Um CSS- und JavaScript (JS)-Dateien über die Linux-Befehlszeile zu minimieren, können Sie zwei beliebte Tools verwenden: UglifyJS > für JavaScript und UglifyCSS für CSS.

Die Minimierung ist ein Prozess, der Ihnen hilft, die Dateigröße zu reduzieren, indem unnötige Zeichen wie Leerzeichen, Tabulatoren, Zeilenumbrüche und Kommentare aus dem Quellcode entfernt werden, ohne deren Funktionalität zu ändern, und der die Ladezeiten für Webanwendungen verbessern kann.

Dieser Artikel führt Sie durch den Prozess der Minimierung von CSS- und JS-Dateien mithilfe der Linux-Befehlszeilenschnittstelle (CLI) mit UglifyJS und UglifyCSS-Tools.

Schritt 1: Node.js und NPM unter Linux installieren

Bevor Sie beginnen, stellen Sie sicher, dass Node.js und npm (Node Package Manager) auf Ihrem Linux-System installiert sind.

node -v
npm -v

Wenn sie nicht installiert sind, können Sie sie mit den folgenden Befehlen auf Debian-basierten Distributionen installieren.

sudo apt update
sudo apt install nodejs npm -y

Auf RHEL-basierten Distributionen können Sie Folgendes verwenden:

sudo dnf update
sudo dnf install nodejs npm -y

Schritt 2: Installation von UglifyJS und UglifyCSS

Sobald Node.js und npm installiert sind, können Sie sie zur Installation von UglifyJS und UglifyCSS verwenden, die npm sind Pakete, die zur Minimierung von JavaScript- bzw. CSS-Dateien verwendet werden.

sudo npm install -g uglify-js
sudo npm install -g uglifycss

Überprüfen Sie nach der Installation, ob UglifyJS und UglifyCSS korrekt installiert sind, indem Sie Folgendes ausführen:

uglifyjs -V
uglifycss -V

Schritt 3: JavaScript- und CSS-Dateien minimieren

Um eine JavaScript- oder CSS-Datei zu minimieren, navigieren Sie zu dem Verzeichnis, das die Datei enthält, die Sie minimieren möchten, indem Sie Folgendes ausführen:

uglifyjs yourfile.js -o yourfile.min.js
uglifycss yourfile.css > yourfile.min.css

Um mehrere CSS- und JS-Dateien in einem Verzeichnis zu minimieren, können Sie ein einfaches Bash-Skript verwenden, das die Leistung Ihrer Website durch die Reduzierung der Dateigrößen erheblich verbessern kann.

Minimierung mehrerer JavaScript-Dateien

Erstellen Sie ein Bash-Skript, um alle JS-Dateien zu minimieren.

nano minify_js.sh

Fügen Sie das folgende Skript zur Datei minify_js.sh hinzu.

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifyjs "$file" -o "${file%.js}.min.js" --compress --mangle
  echo "Minified $file to ${file%.js}.min.js"
done

Machen Sie das Skript ausführbar und führen Sie es aus.

chmod +x minify_js.sh
./minify_js.sh

Dieses Skript durchläuft alle .js-Dateien im Verzeichnis, minimiert sie mit UglifyJS und erstellt neue Dateien mit der Erweiterung .min.js .

Wenn Sie keine neuen Dateien erstellen möchten, können Sie die Option -o im Bash-Skript verwenden, um die Originaldateien zu überschreiben.

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifyjs "$file" --compress --mangle -o "$file"
  echo "Minified $file"
done

Mehrere CSS-Dateien minimieren

Um alle CSS-Dateien in einem Verzeichnis zu minimieren, erstellen Sie auf ähnliche Weise ein Bash-Skript.

nano minify_css.sh

Fügen Sie der Datei minify_css.sh das folgende Skript hinzu:

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifycss "$file" > "${file%.css}.min.css"
  echo "Minified $file to ${file%.css}.min.css"
done

Machen Sie das Skript ausführbar und führen Sie es aus.

chmod +x minify_css.sh
./minify_css.sh

Dieses Skript durchläuft alle .css-Dateien im Verzeichnis, minimiert sie mit UglifyCSS und erstellt neue Dateien mit der Erweiterung .min.css .

Wenn Sie keine neuen Dateien erstellen möchten, können Sie das folgende Bash-Skript verwenden, um die Originaldateien zu überschreiben.

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifycss "$file" > temp.css
  mv temp.css "$file"
  echo "Minified $file"
done

Abschluss

Das Minimieren Ihrer CSS- und JS-Dateien ist ein unkomplizierter Vorgang mit UglifyJS und UglifyCSS auf der Linux-CLI. Dies reduziert nicht nur die Dateigröße, sondern trägt auch dazu bei, die Ladezeiten Ihrer Webseiten zu verbessern.