Используем Gulp для ускорения процесса верстки
Что такое Gulp? Как его установить? Как им пользоваться?
Что такое Gulp?
Определение из Wikipedia
Gulp — это таск-менеджер для автоматического выполнения часто используемых задач (например, минификации, тестирования, объединения файлов), написанный на языке программирования JavaScript.
Существует огромное количество полезных инструментов для HTML-верстки. Самый простой и наиболее показательный инструмент - Autoprefixer.
Представьте, что для поддержки прежних версий браузеров, вам бы пришлось вручную искать и дублировать каждое CSS свойство, которое требует префикса для определенной версии браузера. Так с каждым свойством для каждой необходимой версии браузера.
Gulp, с плагином gulp-autoprefixer, делает это автоматически в реальном времени
Думаю, только этот пример уже не оставляет сомнений в полезности Gulp, а таких плагинов для Gulp более 4 тысяч
Как установить Gulp?
Чтобы установить Gulp, сначала необходимо установить Node.js
Процесс установки Node.js описан в статье Node.js - зачем верстальщику и как установить
После того, как Node.js установлен, переходим к установке Gulp
Нажимаем на клавиатуре сочетание клавиш Win+R
В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”
Если ранее пробовали устанавливать Gulp, то необходимо удалить прежнюю версию, для этого введем и запустим клавишей Enter команду
npm rm --global gulp
После удаления прежней версии Gulp, или если устанавливаем Gulp впервые, вводим команду
npm install --global gulp-cli
Когда процесс установки закончится, проверим, что Gulp корректно установлен, с помощью команды
gulp -v
Если в пункте CLI version: указана версия (на момент написания статьи - 2.3.0), то Gulp установлен корректно (на пункт Local version: пока не обращаем внимания)
Стартовый шаблон gulp-dev
На данный момент, не будем углубляться во все подробности работы Gulp.
Вместо этого покажу свой шаблон Gulp, расскажу его возможности и как им пользоваться.
Этот шаблон использую для верстки уже достаточно долгое время. Сейчас выложил его на GitHub для написания данной статьи - gulp-dev
Что входит в данный шаблон
- Browsersync - будет перезагружать страницу в браузере автоматически при сохранении файлов
- Stylus - ускоряет написание CSS (рассмотрим в одной из следующих статей)
- Autoprefixer - автоматически расставит префиксы в CSS
- Pug - ускоряет написание HTML (рассмотрим в одной из следующих статей)
Данный набор инструментов позволяет ускорить процесс верстки в разы
Также в шаблон добавлены сброс стилей Bootstrap Reboot и jQuery, так как использую их в каждом проекте. Они добавлены как статичные файлы, к Gulp они не относятся. При необходимости можно просто отключить их в файле app/pug/index.pug
Установка шаблона gulp-dev
Заходим на страницу шаблона gulp-dev
Кратко расскажу о некоторых файлах (про папки dist и app расскажу ниже)
- package.json - содержит служебную информацию о репозитории, в этом же файле содержится список зависимостей(плагинов), которые необходимо установить
- gulpfile.js - содержит настройки Gulp, чтобы Gulp мог запуститься и знал, что ему делать
- .gitignore - если используем Git, файлы и папки указанные в этом файле будут игнорироваться при коммитах, то есть эти папки и файлы не будут отслеживаться и в Git-репозиторий они добавляться не будут
Нажимаем на “Code”, затем на “Download ZIP”
Создадим новую папку new_project для проекта (например, на рабочем столе)
Открываем скачанный ZIP-файл gulp-dev-main, внутри ZIP-файла открываем папку gulp-dev-main и копируем все её содержимое в созданную на рабочем столе папку new_project
Далее нажимаем на клавиатуре сочетание клавиш Win+R
В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”
В окне командной строки необходимо перейти в созданную папку new_project
В командной строке пишем cd и через пробел путь до папки (можно скопировать из адресной строки окна и вставить в командной строке правой кнопкой мыши или сочетанием клавиш “Shift+Insert”) и нажимаем Enter
Следующие команды будем запускать для папки new_project
Далее, устанавливаем все выше перечисленные инструменты одной командой
npm i
В папке с проектом появится папка node_modules, в которой хранятся все необходимые файлы для работы Gulp.
Изменять или удалять папку node_modules нельзя
Запускаем Gulp командой
gulp dev
Когда Gulp будет запущен, автоматически откроется браузер с начальной страницей шаблона
Окно командной строки, где запустили Gulp, не закрываем до завершения работы с ним
Что происходит при запуске Gulp?
Постараюсь простыми словами объяснить, что делает Gulp при запуске шаблона gulp-dev
- Сначала, создает структуру папок (добавляет папки src, dist/fonts, dist/img)
- Далее генерирует файл index.html (dist/index.html) из файла index.pug (app/pug/index.pug) и файл main.css (dist/css/main.css) из файла main.styl (app/styl/main.styl)
- Далее запускает локальный сервер и наблюдение за всеми файлами в папке dist для автоматической перезагрузки страницы в браузере при их изменении
Структура шаблона
Папка src/ - для PSD макетов, JPG превью, технического задания и так далее. Черновая папка с файлами которые не будут содержаться в итоговой верстке
Папка app/ - содержит папки pug и styl для соответствующих файлов (подробнее про Pug и Stylus в следующих статьях)
Папка dist/ - итоговая папка с готовой версткой, здесь храним и редактируем все файлы, которые будут содержаться в итоговой верстке (шрифты, изображения, HTML файлы, файлы CSS стилей и JS скриптов), за исключением файлов, которые будут генерироваться автоматически из папки app
Структуру и названия папок не меняем!
Менять структуру и названия можно только при условии, что решите редактировать настройки Gulp в файле gulpfile.js
Пример использования
По Pug и Stylus будут следующие статьи.
На данный момент, просто посмотрим как автоматически генерируются index.html и main.css и обновляется страница при их изменении
Откроем файл index.pug (app/pug/index.pug) в редакторе кода (я использую Sublime Text 3)
Внесем изменения в index.pug
<!DOCTYPE html>
html
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
title
link(rel="stylesheet", href="css/bootstrap-reboot.min.css")
link(rel="stylesheet", href="css/main.css")
body
header.header
.container
.header__flex
.header__logo
a(href="")
img(src="img/logo.png", alt="")
.header__phone
a(href="tel:88001111111") 8 (800) 111-11-11
//- Scripts
script(src="js/jquery-3.5.1.min.js")
script(src="js/main.js")
Повторюсь, синтаксис Pug разберем в одной из следующих статей
Сохраняем index.pug с внесенными изменениями, при этом автоматически генерируется index.html и страница в браузере перезагружается
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header class="header">
<div class="container">
<div class="header__flex">
<div class="header__logo"><a href=""><img src="img/logo.png" alt=""/></a></div>
<div class="header__phone"><a href="tel:88001111111">8 (800) 111-11-11</a></div>
</div>
</div>
</header>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Аналогично откроем main.styl (app/styl/main.styl)
Внесем изменения
// Please delete before starting
body
background lightgreen
Сохраняем main.styl - Gulp генерирует main.css (dist/css/main.css) - страница в браузере перезагружается
body {
background: #90ee90;
}
Итоги
Для Gulp существует более 4000 плагинов. Его можно настроить под любую функциональность - минификация HTML/CSS/JS, оптимизация изображений, расстановка префиксов, автоматическая перезагрузка страниц в браузере, использование любых препроцессоров и шаблонизаторов и многое другое
Следующие статьи будут про Pug и Stylus, в них рассмотрим синтаксис и базовые возможности этих инструментов
