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

Um CSS- und JavaScript-Dateien (JS) ü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 aus dem Quellcode entfernt werden, z. B. Leerzeichen, Tabulatoren, Zeilenumbrüche und Kommentare, 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 den Tools UglifyJS und UglifyCSS.

Schritt 1: Installieren von Node.js und NPM unter Linux

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

node -v
npm -v

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

sudo apt update
sudo apt install nodejs npm -y

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

sudo dnf update
sudo dnf install nodejs npm -y

Schritt 2: Installieren von UglifyJS und UglifyCSS

Sobald Node.js und npm installiert sind, können Sie sie verwenden, um UglifyJS und UglifyCSS zu installieren, bei denen es sich um npm-Pakete handelt, die zum Minimieren 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: Minimieren von JavaScript- und CSS-Dateien

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 erheblich verbessern kann, indem es die Dateigrößen reduziert.

Minimieren mehrerer JavaScript-Dateien

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

nano minify_js.sh

Fügen Sie der minify_js.sh Datei das folgende Skript 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

Minimieren mehrerer CSS-Dateien

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 minify_css.sh Datei 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

Schlussfolgerung

Das Minimieren Ihrer CSS- und JS-Dateien ist ein unkomplizierter Prozess mit UglifyJS und UglifyCSS auf der Linux CLI. Dies reduziert nicht nur die Dateigrößen, sondern hilft auch dabei, die Ladezeiten Ihrer Webseiten zu verbessern.