Как минимизировать CSS и JS файлы с помощью командной строки Linux

Для минификации файлов CSS и JavaScript с помощью командной строки Linux вы можете использовать два популярных инструмента: UglifyJS для JavaScript и UglifyCSS для CSS.

Минификация – это процесс, который помогает уменьшить размер файлов за счет удаления ненужных символов из исходного кода, таких как пробелы, табуляции, переносы строк и комментарии, без изменения их функциональности и улучшит время загрузки веб-приложений или сайта.

В этой статье мы расскажем вам о процессе минификации CSS и JS файлов с помощью интерфейса командной строки (CLI) Linux с помощью инструментов UglifyJS и UglifyCSS.

Интересно: Как настроить сервер потокового видео с помощью Nginx-RTMP на Ubuntu 22.04

Шаг 1: Установка Node.js и NPM в Linux

Прежде чем начать, убедитесь, что в вашей системе Linux установлены Node.js и npm (Node Package Manager).

node -v
npm -v

Если они не установлены, вы можете установить их в Debian с помощью следующих команд.

sudo apt update
sudo apt install nodejs npm -y

В дистрибутивах RHEL вы можете использовать:

sudo dnf update
sudo dnf install nodejs npm -y

Шаг 2: Установка UglifyJS и UglifyCSS

После установки Node.js и npm вы можете использовать их для установки UglifyJS и UglifyCSS, которые являются пакетами npm, используемыми для минификации JavaScript и CSS файлов, соответственно.

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

После установки проверьте, правильно ли установлены UglifyJS и UglifyCSS, выполнив команду:

Интересно: Как установить Prestashop с Apache и бесплатным Lets Encrypt на Debian 12

uglifyjs -V
uglifycss -V

Шаг 3: Минификация файлов JavaScript и CSS

Чтобы минифицировать файл JavaScript или CSS, перейдите в каталог, содержащий файл, который вы хотите минифицировать, и выполните команду:

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

Для минификации нескольких CSS и JS файлов в директории можно использовать простой bash-скрипт, который может значительно улучшить производительность вашего сайта за счет уменьшения размера файлов.

Минификация нескольких файлов JavaScript

Создайте Bash-скрипт для минификации всех JS-файлов.

nano minify_js.sh

Добавьте следующий скрипт в файл 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

Сделайте скрипт исполняемым и запустите его.

chmod +x minify_js.sh
./minify_js.sh

Этот скрипт просмотрит все .js файлы в директории, минифицирует их с помощью UglifyJS и создаст новые файлы с расширением .min.js.

Если вы не хотите создавать новые файлы, вы можете использовать опцию -o в bash-скрипте, чтобы перезаписать исходные файлы.

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

Минификация нескольких CSS-файлов

Чтобы минифицировать все CSS-файлы в каталоге, создайте Bash-скрипт.

nano minify_css.sh

Добавьте следующий скрипт в файл 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

Сделайте скрипт исполняемым и запустите его.

chmod +x minify_css.sh
./minify_css.sh

Этот скрипт пройдется по всем .css файлам в директории, минифицирует их с помощью UglifyCSS и создаст новые файлы с расширением .min.css.

Если вы не хотите создавать новые файлы, вы можете использовать следующий bash-скрипт для перезаписи исходных файлов.

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

Заключение

Минификация файлов CSS и JS – это простой процесс с помощью UglifyJS и UglifyCSS* в Linux CLI. Это не только уменьшает размер файлов, но и помогает улучшить время загрузки ваших веб-страниц.