Como minimizar arquivos CSS e JS usando UglifyJS e UglifyCSS

Para reduzir arquivos CSS e JavaScript (JS) usando a linha de comando do Linux, você pode utilizar duas ferramentas populares: UglifyJS para JavaScript e UglifyCSS para CSS.

Minificação é um processo que ajuda a reduzir o tamanho dos arquivos, removendo caracteres desnecessários do código-fonte, como espaços, tabulações, quebras de linha e comentários, sem alterar sua funcionalidade e pode melhorar o tempo de carregamento de aplicativos da web.

Este artigo irá guiá-lo através do processo de redução de arquivos CSS e arquivos JS usando a interface de linha de comando (CLI) do Linux com UglifyJS e Ferramentas UglifyCSS.

Etapa 1: Instalando Node.js e NPM no Linux

Antes de começar, certifique-se de ter Node.js e npm (Node Package Manager) instalados em seu sistema Linux.

node -v
npm -v

Se eles não estiverem instalados, você poderá instalá-los em distribuições baseadas em Debian usando os seguintes comandos.

sudo apt update
sudo apt install nodejs npm -y

Em distribuições baseadas em RHEL, você pode usar:

sudo dnf update
sudo dnf install nodejs npm -y

Etapa 2: Instalando UglifyJS e UglifyCSS

Depois que Node.js e npm estiverem instalados, você poderá usá-los para instalar UglifyJS e UglifyCSS, que são npm pacotes usados para reduzir arquivos JavaScript e CSS, respectivamente.

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

Após a instalação, verifique se UglifyJS e UglifyCSS estão instalados corretamente executando:

uglifyjs -V
uglifycss -V

Etapa 3: Minimizando arquivos JavaScript e CSS

Para minificar um arquivo JavaScript ou CSS, navegue até o diretório que contém o arquivo que você deseja minificar executando:

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

Para reduzir vários arquivos CSS e JS em um diretório, você pode usar um script bash simples que pode melhorar significativamente o desempenho do seu site, reduzindo o tamanho dos arquivos.

Minimizando vários arquivos JavaScript

Crie um script Bash para reduzir todos os arquivos JS.

nano minify_js.sh

Adicione o script a seguir ao arquivo 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

Torne o script executável e execute-o.

chmod +x minify_js.sh
./minify_js.sh

Este script percorrerá todos os arquivos .js no diretório, minificará-os usando UglifyJS e criará novos arquivos com a extensão .min.js .

Se não quiser criar novos arquivos, você pode usar a opção -o no script bash para substituir os arquivos originais.

#!/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

Minimizando vários arquivos CSS

Da mesma forma, para reduzir todos os arquivos CSS em um diretório, crie um script Bash.

nano minify_css.sh

Adicione o seguinte script ao arquivo 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

Torne o script executável e execute-o.

chmod +x minify_css.sh
./minify_css.sh

Este script percorrerá todos os arquivos .css no diretório, minificará-os usando UglifyCSS e criará novos arquivos com a extensão .min.css .

Se não quiser criar novos arquivos, você pode usar o seguinte script bash para substituir os arquivos originais.

#!/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

Conclusão

Minimizar seus arquivos CSS e JS é um processo simples usando UglifyJS e UglifyCSS na CLI do Linux. Isso não apenas reduz o tamanho dos arquivos, mas também ajuda a melhorar o tempo de carregamento de suas páginas da web.