При разработке сайтов вебмастеру часто приходится сталкиваться со множеством мелких операций, которые могут отнимать много времени, но в то же время хорошо поддаются оптимизации.
Для автоматизации подобных задач был создан 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
получим следующее:
Нажмем F12 в открывшемся окне нажмем на Network и поставим галочку «Disable cache»
Обновим страницу, запомним значения в нижней строке.
Перейдем в консоль нашего сервера в 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 и обновим страницу:
Итого, у нас было 140 Кб, а стало 118 Кб.
Итого, мы добились экономии трафика на 16%, минус один запрос.
Наша страница загрузила на 50% Kb меньше ресурсов, как такое может быть?
Всё дело в сжатии. У меня nginx настроен таким образом, что он сжимает с помощью gzip файлы перед передачей, загрузка файлов, необходимых для отображения сайта, происходит быстрее, а браузер распаковывает переданные архивы налету.
На время загрузки можете не обращать внимания, так как сайт у нас запущен не на сервере и в зависимости от активности фоновых процессов и антивируса результаты могут сильно различаться.
Может показаться, что это незначительное уменьшение, при нынешних каналах доступа в интернет, но у нас примитивная страница без функционала. Для больших сайтов выигрыш может быть значительным!
Заключение
Сегодня мы рассмотрели установку Gulp на виртуальную машину, запущенную в WSL2 под Windows 10.
Был установлен Фреймворк Node.js для поддержки GULP.
Мы установили тестовый сайт с установленным Gulp и проверили на сколько изменился размер передаваемой информации после применения к нему плагинов Gulp.
В следующей статье мы поэтапно рассмотрим создание скриптов для разработки сайта с помощью Gulp.
