Используем Gulp для ускорения процесса верстки

Что такое Gulp? Как его установить? Как им пользоваться?

bg



Прежде чем начать, хотел бы обратить внимание, что у блога есть телеграм канал https://t.me/frontips, где можно узнавать о выходе новых статей и со временем будет появляться больше интересной и полезной информации.

Поддержите развитие блога и канала подпиской!

А теперь перейдём к теме статьи ;) Приятного чтения!



Что такое 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 и нажимаем “ОК”

1

Если ранее пробовали устанавливать Gulp, то необходимо удалить прежнюю версию, для этого введем и запустим клавишей Enter команду

npm rm --global gulp

2

После удаления прежней версии Gulp, или если устанавливаем Gulp впервые, вводим команду

npm install --global gulp-cli

3

Когда процесс установки закончится, проверим, что Gulp корректно установлен, с помощью команды

gulp -v

4

Если в пункте CLI version: указана версия (на момент написания статьи - 2.3.0), то Gulp установлен корректно (на пункт Local version: пока не обращаем внимания)



Стартовый шаблон gulp-dev

На данный момент, не будем углубляться во все подробности работы Gulp.

Вместо этого покажу свой шаблон Gulp, расскажу его возможности и как им пользоваться.

Этот шаблон использую для верстки уже достаточно долгое время. Сейчас выложил его на GitHub для написания данной статьи - gulp-dev



Что входит в данный шаблон

  1. Browsersync - будет перезагружать страницу в браузере автоматически при сохранении файлов
  2. Stylus - ускоряет написание CSS (рассмотрим в одной из следующих статей)
  3. Autoprefixer - автоматически расставит префиксы в CSS
  4. Pug - ускоряет написание HTML (рассмотрим в одной из следующих статей)

Данный набор инструментов позволяет ускорить процесс верстки в разы

Также в шаблон добавлены сброс стилей Bootstrap Reboot и jQuery, так как использую их в каждом проекте. Они добавлены как статичные файлы, к Gulp они не относятся. При необходимости можно просто отключить их в файле app/pug/index.pug

12



Установка шаблона gulp-dev

Заходим на страницу шаблона gulp-dev

Кратко расскажу о некоторых файлах (про папки dist и app расскажу ниже)

  1. package.json - содержит служебную информацию о репозитории, в этом же файле содержится список зависимостей(плагинов), которые необходимо установить
  2. gulpfile.js - содержит настройки Gulp, чтобы Gulp мог запуститься и знал, что ему делать
  3. .gitignore - если используем Git, файлы и папки указанные в этом файле будут игнорироваться при коммитах, то есть эти папки и файлы не будут отслеживаться и в Git-репозиторий они добавляться не будут

Нажимаем на “Code”, затем на “Download ZIP”

5

Создадим новую папку new_project для проекта (например, на рабочем столе)

Открываем скачанный ZIP-файл gulp-dev-main, внутри ZIP-файла открываем папку gulp-dev-main и копируем все её содержимое в созданную на рабочем столе папку new_project

6

Далее нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”

1

В окне командной строки необходимо перейти в созданную папку new_project

В командной строке пишем cd и через пробел путь до папки (можно скопировать из адресной строки окна и вставить в командной строке правой кнопкой мыши или сочетанием клавиш “Shift+Insert”) и нажимаем Enter

Следующие команды будем запускать для папки new_project

7

Далее, устанавливаем все выше перечисленные инструменты одной командой

npm i

8

В папке с проектом появится папка node_modules, в которой хранятся все необходимые файлы для работы Gulp.

Изменять или удалять папку node_modules нельзя

11

Запускаем Gulp командой

gulp dev

9

Когда Gulp будет запущен, автоматически откроется браузер с начальной страницей шаблона

10

Окно командной строки, где запустили Gulp, не закрываем до завершения работы с ним



Что происходит при запуске Gulp?

Постараюсь простыми словами объяснить, что делает Gulp при запуске шаблона gulp-dev

  1. Сначала, создает структуру папок (добавляет папки src, dist/fonts, dist/img)
  2. Далее генерирует файл index.html (dist/index.html) из файла index.pug (app/pug/index.pug) и файл main.css (dist/css/main.css) из файла main.styl (app/styl/main.styl)
  3. Далее запускает локальный сервер и наблюдение за всеми файлами в папке 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)

13

Внесем изменения в 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)

14

Внесем изменения

// 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, в них рассмотрим синтаксис и базовые возможности этих инструментов



Друзья, стараюсь для вас, поддержите проект!

Подписывайтесь, впереди много всего интересного и полезного ;)

Telegram - https://t.me/frontips

VK - https://vk.com/frontips