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

Чтобы уменьшить размер файлов CSS и JavaScript (JS) с помощью командной строки Linux, вы можете использовать два популярных инструмента: UglifyJS для JavaScript и UglifyCSS для CSS.

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

Эта статья проведет вас через процесс уменьшения размера файлов CSS и JS с использованием интерфейса командной строки Linux (CLI) с помощью инструментов UglifyJS и UglifyCSS.

 

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

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

node -v 
npm -v

 

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

sudo apt update
sudo apt install nodejs npm -y

 

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

sudo dnf update
sudo dnf install nodejs npm -y

 

Установите NodeJS и NPM в Linux

 

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

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

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

 

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

uglifyjs -V 
uglifycss -V

Проверьте версию UglifyJS и UglifyCSS

 

Шаг 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 "Пропуск уменьшенного файла: $file"
    continue
  fi
  uglifyjs "$file" -o "${file%.js}.min.js" --compress --mangle
  echo "Уменьшил размер $file до ${file%.js}.min.js"
done

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

chmod + x minify_js.sh
./minify_js.sh

 

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

 

Уменьшение размера нескольких JS файлов

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

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Пропуск уже уменьшенного файла: $file"
    continue
  fi
  uglifyjs "$file" --compress --mangle -o "$file"
  echo "Уменьшенный $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 "Пропуск уменьшенного файла: $file"
    continue
  fi
  uglifycss "$file" > "${file%.css}.min.css"
  echo "Уменьшил размер $file до ${file%.css}.min.css"
done

 

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

chmod +x minify_css.sh
./minify_css.sh

 

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

 

Уменьшение размера нескольких CSS файлов

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

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Пропуск уже уменьшенного файла: $file"
    continue
  fi
  uglifycss "$file" > temp.css
  mv temp.css "$file"
  echo "Уменьшенный $file"
done

 

Заключение

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