Ricerca nel sito web

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.

Articoli correlati: