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

Для автоматизации подобных задач был создан GULP. Он написан на Node.js и посредством множества плагинов позволяет автоматизировать множество рутинных операций, с которыми приходится сталкивать вебмастеру – минификация CSS и JavaScript, перезагрузка страницы в браузере при внесении изменения в CSS, JS или HTML-код, а также автоматическое сжатие изображений, конвертация их в формат WEBP, создание атласа для иконок и много другое.

Так же существуют плагины, позволяющие вырезать неиспользуемый CSS-код (Uncss), что помогает уменьшить время загрузки сайтов!

В этой статье мы рассмотрим установку GULP на виртуальную машину WSL2 в Windows 10.

Разработка сайтов никогда не была простой. В прошлом вебмастеру, при создании сайта, приходилось учитывать множество факторов – существовал целый зоопарк браузеров, при этом разных версий, которые по-разному отображали одни и те же элементы на странице или вообще их не поддерживали. Это касалось и CSS, особенно в этом отличилась Microsoft со своим Internet Explorer. Для обеспечения совместимости со всеми известными браузерами приходилось писать много дополнительного CSS и JS кода для того, чтобы на всех браузерах сайт выглядел одинаково.

К счастью, сегодня все браузеры поддерживаю стандарт HTML5 и CSS3 и выводят на экран все сайты одинаково. Зато появилась новая проблема – разные размеры экранов, на мобильных устройствах – планшетах и смартфонах.

Всё это привело к новым требованиям к дизайну сайтов - он должен быть адаптивным. К тому же мобильные устройства обладают меньшей производительностью и объемом памяти, по сравнению с ПК, потому мобильная версия сайта должна быть намного «легче».

Все это требует структурного подхода при разработке программного кода сайта – HTML, CSS и JS. Можно все размещать в один файл, но прокручивать «простыню» кода каждый раз не очень удобно. Намного удобнее хранить код JS и CSS в отдельных файлах и разных папках, таким образом вы всегда легко сможете найти требуемый кусок кода.

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

Для решения всех этих проблем был создан GULP. Он позволяет автоматизировать рутинные операции и сильно облегчает жизнь вебмастеру.

Установка Node.js

Gulp написан на платформе Node.js и, прежде чем продолжить, мы должны его установить. Установку мы будем производить на Debian Linux настроенный по этой статье.

Запустим

apt update
apt -y upgrade

Мы будем ставить версию 15.x, возможно, на момент прочтения этой статьи выйдет новая версия, в таком случае, просто замените в строке

https://deb.nodesource.com/setup_15.x

15.х на номер вашей версии

Добавим необходимые репозитории в APT

curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash –

Снова запустим:

apt update
apt -y upgrade

Установим Node.js и дополнительные пакеты, они потребуются при установке плагинов:

sudo apt -y install build-essential gcc g++ make nodejs python2 git

Проверим версию

sudo npm –v
7.6.0

На всякий случай обновим npm

sudo npm install --global npm

Установка Gulp

sudo npm install --global gulp-cli

Проверим версию Gulp

gulp --version
CLI version: 2.3.0
Local version: Unknown

Тестовый проект

Скачаем простой тестовый проект.

У меня корневой папкой сервера является /var/www/html, перейдем в нее

cd /var/www/html

Скачаем тестовый проект с Github - https://github.com/vasiliyaltunin/articles.blog.altuninvv.ru/tree/master/gulp/test1 и распакуем в папку 

/var/www/html

Откроем в браузере адрес:

http://127.0.0.1/src

получим следующее:

2021-03-22_17-38-00.png

Нажмем F12 в открывшемся окне нажмем на Network и поставим галочку «Disable cache»

2021-03-23_14-52-12.png

Обновим страницу, запомним значения в нижней строке.

Перейдем в консоль нашего сервера в WSL2 и запустим:

npm install --save-dev

Начнется длительный процесс скачивания необходимых пакетов

Установка gulp для тестового проекта

Запустим из /var/www/html

npm install gulp --save-dev

Запустим:

npm audit fix --force

Проверим версию:

gulp --version
CLI version: 2.3.0
Local version: 4.0.2

Запустим gulp

/var/www/html$ gulp
Gulp init...
[15:00:28] Using gulpfile /var/www/html/gulpfile.js
[15:00:28] Starting 'default'...
[15:00:28] Starting 'sassFunc'...
[15:00:32] Finished 'sassFunc' after 3.55 s
[15:00:32] Starting 'jsFunc'...
[15:00:32] Finished 'jsFunc' after 70 ms
[15:00:32] Starting 'htmlFunc'...
[15:00:32] Finished 'htmlFunc' after 53 ms
[15:00:32] Finished 'default' after 3.67 s

В браузере откроем ссылку

http://127.0.0.1/

Откроем инструменты разработчика F12 и обновим страницу:

2021-03-25_10-22-17_2.png

Итого, у нас было 140 Кб, а стало 118 Кб.

Итого, мы добились экономии трафика на 16%, минус один запрос.

Наша страница загрузила на 50% Kb меньше ресурсов, как такое может быть?

Всё дело в сжатии. У меня nginx настроен таким образом, что он сжимает с помощью gzip файлы перед передачей, загрузка файлов, необходимых для отображения сайта, происходит быстрее, а браузер распаковывает переданные архивы налету.

На время загрузки можете не обращать внимания, так как сайт у нас запущен не на сервере и в зависимости от активности фоновых процессов и антивируса результаты могут сильно различаться.

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

Заключение

Сегодня мы рассмотрели установку Gulp на виртуальную машину, запущенную в WSL2 под Windows 10.

Был установлен Фреймворк Node.js для поддержки GULP.

Мы установили тестовый сайт с установленным Gulp и проверили на сколько изменился размер передаваемой информации после применения к нему плагинов Gulp.

В следующей статье мы поэтапно рассмотрим создание скриптов для разработки сайта с помощью Gulp.