Come minimizzare i file CSS e JS utilizzando UglifyJS e UglifyCSS
Per minimizzare i file CSS e JavaScript (JS) utilizzando la riga di comando di Linux, puoi utilizzare due strumenti popolari: UglifyJS per JavaScript e UglifyCSS per CSS.
La minimizzazione è un processo che ti aiuta a ridurre le dimensioni dei file rimuovendo i caratteri non necessari dal codice sorgente, come spazi, tabulazioni, interruzioni di riga e commenti, senza modificarne la funzionalità e può migliorare i tempi di caricamento delle applicazioni web.
Questo articolo ti guiderà attraverso il processo di minimizzazione dei file CSS e JS utilizzando l'interfaccia a riga di comando (CLI) di Linux con UglifyJS e Strumenti UglifyCSS.
Passaggio 1: installazione di Node.js e NPM in Linux
Prima di iniziare, assicurati di avere Node.js e npm (Node Package Manager) installati sul tuo sistema Linux.
node -v
npm -v
Se non sono installati, puoi installarli su distribuzioni basate su Debian utilizzando i seguenti comandi.
sudo apt update
sudo apt install nodejs npm -y
Nelle distribuzioni basate su RHEL è possibile utilizzare:
sudo dnf update
sudo dnf install nodejs npm -y
Passaggio 2: installazione di UglifyJS e UglifyCSS
Una volta installati Node.js e npm, puoi utilizzarli per installare UglifyJS e UglifyCSS, che sono npm pacchetti utilizzati rispettivamente per minimizzare i file JavaScript e CSS.
sudo npm install -g uglify-js
sudo npm install -g uglifycss
Dopo l'installazione, controlla se UglifyJS e UglifyCSS sono installati correttamente eseguendo:
uglifyjs -V
uglifycss -V
Passaggio 3: minimizzare i file JavaScript e CSS
Per minimizzare un file JavaScript o CSS, vai alla directory contenente il file che desideri minimizzare eseguendo:
uglifyjs yourfile.js -o yourfile.min.js
uglifycss yourfile.css > yourfile.min.css
Per minimizzare più file CSS e JS in una directory, puoi utilizzare un semplice script bash che può migliorare significativamente le prestazioni del tuo sito web riducendo le dimensioni dei file.
Minimizzazione di più file JavaScript
Crea uno script Bash per minimizzare tutti i file JS.
nano minify_js.sh
Aggiungi il seguente script al file minify_js.sh
.
#!/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
Rendi eseguibile lo script ed eseguilo.
chmod +x minify_js.sh
./minify_js.sh
Questo script scorrerà tutti i file .js
nella directory, li minimizzerà utilizzando UglifyJS e creerà nuovi file con l'estensione .min.js
.
Se non vuoi creare nuovi file, puoi utilizzare l'opzione -o
nello script bash per sovrascrivere i file originali.
#!/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
Minimizza più file CSS
Allo stesso modo, per minimizzare tutti i file CSS in una directory, crea uno script Bash.
nano minify_css.sh
Aggiungi il seguente script al file minify_css.sh
:
#!/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
Rendi eseguibile lo script ed eseguilo.
chmod +x minify_css.sh
./minify_css.sh
Questo script scorrerà tutti i file .css
nella directory, li minimizzerà utilizzando UglifyCSS e creerà nuovi file con l'estensione .min.css .
Se non vuoi creare nuovi file, puoi utilizzare il seguente script bash per sovrascrivere i file originali.
#!/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
Conclusione
Minimizzare i file CSS e JS è un processo semplice utilizzando UglifyJS e UglifyCSS sulla CLI di Linux. Ciò non solo riduce le dimensioni dei file, ma aiuta anche a migliorare i tempi di caricamento delle tue pagine web.