Gulp скринкаст: Скринкаст по Gulp

Веб-разработка с нуля

Front-end

Верстка

Знакомство с версткой

Данный уровень предназначен для людей, которые никогда не верстали и не имеют представления о верстке, CSS и HTML.

Курсы

1. Введение в Интернет
2. Основы HTML
3. Содержимое в HTML
4. Формы в HTML
5. Основы CSS
6. Текст в CSS
7. Блочная модель в CSS
8. Позиционирование в CSS
9. Уроки по HTML и CSS

Справочники

1. CSS-селекторы
2. Размеры
3. Цвета
4. Уголы
5. Медиа-запросы
6. Фильтры

Скринкасты

1. Основы HTML

Базовая верстка

Данный уровень предназначен для людей, имеющих базовые представления о верстке, CSS и HTML.

Курсы

1. Погружение в HTML5
2. Как верстать на HTML5 и CSS3
3. HTML5 и CSS3 на примерах
4. Магия CSS
5. Продвинутый CSS
6. Продвинутые уроки по HTML и CSS

Статьи

1. Адаптивная верстка
2. Retina
3. Email-писем

Справочники

1. Справочник CSS
2. Справочник HTML

Современные технологии верстки

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

Курсы

1. Font Awesome
2. Browser Rendering Optimization

Документация

1. Основы БЭМ

Статьи

1. Вёрстка адаптивных email-писем (часть 1)
2. Вёрстка адаптивных email-писем (часть 2)
3. Способы организации CSS-кода

Скринкасты

1. CSS: Flexbox
2. Пишем БЭМ правильно

Справочники

1. Рендеринг CSS

Надстройки над HTML и CSS

Метаязыки являющиеся надстройками над HTML CSS.

Курсы

1. Основы Sass
2. Sass
3. Less

Документация

1. SassScript
2. Jade
3. Stylus

Автоматизация разработки

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

Курсы

1. Приступая к работе с Grunt
2. Сборка с Gulp
3. Автоматизация работы с Gulp
4. Bower, Gulp и Yeoman
5. Node, Express и libsass: проект с нуля

Скринкасты

1. Скринкаст по Gulp
2. Скринкаст по Webpack

Фреймворки для верстки

Готовые фреймворки для верстки макетов.

Курсы

1. Bootstrap

Документация

1. Bootstrap
2. Foundation
3. Skeleton

JavaScript

Язык JavaScript

Курсы

1. Знакомство с JavaScript

Учебник

1. Введение
2. Основы JavaScript
3. Качество кода
4. Структуры данных
5. Замыкания, область видимости
6. Методы объектов и контекст вызова
7. Некоторые другие возможности
8. ООП в функциональном стиле
9. ООП в прототипном стиле
10. Современные возможности ES-2015

Скринкасты

1. Основы ES6
2. Javascript Tutorial For Beginners
3. Javascript Fundamentals
4. Modular Javascript

Документ, события, интерфейсы

Учебник

1. Документ и объекты страницы
2. Основы работы с событиями
3. События в деталях
4. Формы, элементы управления
5. Создание графических компонентов

Дополнительно

Курсы

1. Глубокое погружение в Canvas

Учебник

1. Веб-компоненты: взгляд в будущее
2. AJAX и COMET
3. Анимация
4. Оптимизация
5. Окна и Фреймы
6. CSS для JavaScript-разработчика
7. Сундучок с инструментами
8. Регулярные выражения
9. О всякой всячине

Node.

JS

Курсы

1. Создание первого приложения на Node

Скринкасты

1. Скринкаст по Node.JS
2. Node.js Tutorials

Документация

1. Node.JS

jQuery

Курсы

1. Основы jQuery

Скринкасты

1. jQuery Tutorial for Beginners

Документация

1. jQuery API

AngularJS

Курсы

1. AngularJS. Рецепты программирования

Скринкасты

1. Основы Angular 2
2. MEAN Stack Tutorials (MongoDB, Express, Angular, NodeJs)

React

Скринкасты

1. React JS Tutorials
2. Redux Tutorials

Back-end

PHP

Справочник языка

Документация

1. Основы синтаксиса
2. Типы
3. Переменные
4. Константы
5. Выражения
6. Операторы
7. Управляющие конструкции
8. Функции
9. Классы и объекты
10. Пространства имен

Дополнительно

Документация

1. Errors
2. Исключения
3. Generators
4. Ссылки. Разъяснения
5. Предопределённые переменные
6. Предопределённые исключения
7. Встроенные интерфейсы и классы
8. Контекстные опции и параметры
9. Поддерживаемые протоколы и обработчики (wrappers)
10. Безопасность
11. Отличительные особенности
12. Справочник функций
13. Ядро PHP: Руководство хакера

Дополнительно

Системы контроля версий

Git

Учебник

1. Введение
2. Основы Git
3. Ветвление в Git
4. Git на сервере
5. Распределённый Git
6. Инструменты Git
7. Настройка Git
8. Git и другие системы контроля версий
9. Git изнутри

Мои инструменты и технологии – Николай Громов

Каждый день я пишу относительно много разметки, стилей и JS, использующихся в коммерческих проектах. За время работы (с 2000 г.) попробовал довольно много техник, технологий и ПО, о которых коротко расскажу в этой статье.

Мои студентам на Эпике, в HTML Академии, учащимся Loftschool и просто интересующимся.

Общий подход

Красивый код

Всегда пишите красивый код!

• Его быстрее (и приятнее) читать.
• В нём видно ошибки.

Сам всегда сразу пишу красивый код, но если у вас с этим проблемы, можно смотреть в сторону автоматических средств форматирования в используемом редакторе, в сторону проверки форматирования перед коммитом (см. [Git(#git)]) или в сторону консольных утилит.

БЭМ как система именования

Это самое простое, надёжное и не зависящее от технологического стека решение, позволяющее избежать уймы проблем (большая часть проблем являются «врождёнными» для используемых в браузере технологий). Вкратце познакомиться с БЭМ как отношением к интерфейсу и системой именования селекторов можно в моём небольшом материале Как работать с CSS-препроцессорами и БЭМ, а более полно, вместе с объемным стеком БЭМ-технологий — на официальном сайте.

Если совсем коротко, то БЭМ (не полный стек, а только как система именования) даёт пространство имён селектора, что приводит к изоляции компонентов в стилях (с поправкой на наследование свойств) и к безопасной модификации стилей отдельных блоков, элементов, модификаторов.

Конечно, при использовании специфических стеков технологий (React, Vue…) можно организовать такую «изоляцию» и другими способами (CSS in JS, детка!), но они тянут за собой множество специфических инструментов.

Обучение

«Учусь, следовательно, существую», перефразируя Декарта. Если перестать учиться, можно быстро «выпасть» из профессиональной сферы.

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

Не менее 1 часа в сутки стоит уделять обучению.

Англоязычные ресурсы, которые мне нравятся:

• css-tricks.com
• alistapart.com
• tympanus.net/codrops
• css-weekly.com/archives
• lea.verou.me
• sarasoueidan.com
• csswizardry.com

Сообщества во ВКонтакте, за которыми я слежу:

• Веб-стандарты
• For Web
• uWebDesign
• Webtackles
• Love Frontend
• Frontend Raccoon
• CSS-live

Эксперименты

Мне иногда пишут в соц. сетях (чаще — в ВК), интересуясь как сверстать тот или иной заковыристый компонент страницы (когда не пишут, выдумываю себе задачи сам, если испытываю в них недостаток по ходу работы). Решение подобных задач держит в тонусе.

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

Редактор кода

После мозгов и рук, это главный ваш инструмент, нужно знать его досканально. Я использую для написания кода Sublime Text 3.

Установленные у меня плагины:

• Package Control (менеджер пакетов (для установки всего остального)),
• A File Icon (чистое украшательство),
• AutoFileName (облегчает указание пути к файлам в проекте),
• BracketHightlighter (подсветка открывающей/закрывающей скобки),
• Color Highlighter (показывает цвет в стилевых файлах),
• DocBlockr (делает более удобным многострочное комментирование, описание функций в JS),
• eCSStractor (извлекает список селекторов из разметки (можно в БЭМ-представлении, с амперсандами в местах разделения элементов и модификаторов)),
• EditorConfig (добавляет поддержку проектных файлов . editorconfig с универсальными настройками редактора),
• Emmet (быстрое написание разметки и стилей),
• GitGutter (подсвечивает изменения от предыдущего коммита),
• Jade, Pug, JSX, LESS, Sass, Stylus, MarkdownLight, Syntax Highlighting for PostCSS (подсветка синтаксисов соответствующих языков),
• PyV8 (нужен для работы Emmet, автоматически ставится вместе с ним),
• List stylesheet variables (даёт список стилевых переменных проекта с нечётким поиском),
• SideBarEnhancemets (расширяет функциональность контекстного меню сайдбара),
• StringEncode (преобразует строки, в т.ч. экранирует HTML-символы),
• Sync Settings (синхронизирует настройки, плагины, темы между несколькими компьютерами),
• View In Browser (добавляет в контекстное меню файлов проекта пункты для открытия в браузерах).

Прочие дополнения брать здесь.

Горячие кнопки радикально ускоряют работу. Смотри шпаргалку по горячим кнопкам ST3.

Настройки самого ST3 менее важны, но некоторые из них стоит сделать:

• включить автосохранение файла по потере фокуса на окне,
• добавить в игнорирование некоторые файлы и папки, чтобы не видеть их в ФС проекта,
• отключить автодопонение, если оно мешает пользоваться Emmet.

Мои настройки на момент написания этого материала (за исключением темы оформления и словаря проверки орфографии).

Я активно пользуюсь переключением между проектами (сохраняю проекты ST3 в директорию проекта) и нечётким поиском по файлам (Crtl + P на Windows, Cmd + P на OSX).

Я экспериментировал с Atom (использовал его 4 месяца, но вернулся к ST3 из-за скорости работы) и VS Code. Для обоих этих редакторов удавалось найти похожие дополнения и организовать весьма похожий рабочий процесс.

DevTools

Второй по важности инструмент, даёт понимание того, как сработал ваш код. Поскольку изначально мы верстаем под самый распространенный в ЦА браузер (почти для всех проектов это Chrome), речь именно про DevTools Google Chrome.

Для верстальщика наиболее важны вкладки Elements (узлы DOM и применённые к ним стили в подвкладке Styles) и Network (активность браузера при открытии страницы), однако это лишь малая часть возможностей.

Для изучения:

• Документация
• «Что нового» в формате видео от разработчиков
• Короткие видео с возможностями DevTools
• Пример простенького дебага JS в DevTools

Git

Работать над кодом (да и любым текстом) без системы контроля версий — немыслимо. С Git вы получаете:

• Удобную работу в команде (даже если два разработчика правили один и тот же файл).
• Удобство собственной работы на двух (и более) рабочих местах.
• Полную историю изменений в проекте с возможностью возврата к любой временной точке.
• Резервную копию на удалённом сервере (github, bitbucket, gitlab…).
• Автоматическую проверку форматирования и некоторых типовых ошибок по хукам (перед коммитом, перед пушем…).
• Возможность логического ветвления (разработка или проба какой-либо возможности проекта в отдельной ветви разработки).
• В комбинации с github — интерфейс принятия изменений из ветки или форка (Pull Request) с возможностью построчного обсуждения предлагаемого кода.

Для освоения git рекомендую отличный скринкаст Ильи Кантора (на данный момент там отсутствует раздел про удалённые репозитории, но это единственный минус) и переведённый на русский язык скринкаст про Git от lynda.com.

См. так же мою шпаргалку по командам Git.

Терминал

Я использую командную строку по нескольким причинам:

1. Существует множество консольных инструментов, которые удобнее (и развиваются быстрее) инструментов с графическим интерфейсом и при этом бесплатны. В отрыве от вёрстки/фронтенда, к примеру, инструмент для скачивания видео с youtube, в одну команду сохраняющий видео (с он-лайн сервисами это менее удобно).
2. Можно писать собственные инструменты на Javascript. Например, генератор файловой структуры новых блоков в проекте.
3. В моей работе много задач (часто — рутинных, типа сборки спрайтов), которые могут быть автоматизированы консольными утилитами. Вся автоматизация проекта у меня работает на Gulp, а у него лишь консольный интерфейс.
4. Некоторые файловые операции быстрее делать из терминала.
5. Git имеет консольный интерфейс (все GUI для Git — лишь надстройки над командами в терминале).
6. Можно воображать себя хакером.

Для студентов с Windows на базовом и продвинутом курсах по вёрстке в EpicSkills я рекомендую использовать GitBash, чтобы у владельцев Windows, OSX и Linux были похожие команды в терминале, но сам недавно внедрил в свою практику терминал подсистемы Linux.

Использую алиасы (сокращения для длинных команд) для Git-команд и для быстрого перехода в папки конкретных проектов. Пример файла с алиасами.

Препроцессоры

Из стилевых препроцессоров я пробовал LESS, Sass и stylus (плюс, условно, PostCSS). На данный момент остановился на Sass (увы, stylus не разрабатывается более), хотя остались в поддержке и проекты на LESS. Возможности нативного CSS пока не устраивают и на призывы отказаться от препроцессоров я смотрю как на «ребячество в отрыве от реальной жизни».

В плане написания разметки мне по-прежнему очень нравится писать обычный html, однако для относительно простых проектов я всё чаще использую pug.

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

Автоматизация

Если вы занимаетесь веб-разработкой как хобби (как некоторая часть русскоязычных веб-евангелистов) и самые сложные ваши задачи — сайты котов и прочие «проекты», где вы сами себе заказчик, то можно обойтись и без автоматизации, ибо вам не нужны:

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

Я автоматизирую рабочий процесс с помощью Gulp (про который есть отличный скринкаст), т.к. на собственных проектах (я фрилансер) не нуждаюсь в возможностях Webpack (сейчас работаю по одному стороннему проекту с React, там, конечно, Webpack).

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

Стартовая библиотека

Постоянно приходится верстать похожие элементы страницы. Разумно сделать библиотеку компонентов с универсальной разметкой и самой базовой стилизацией для коросспроектного использования. У меня такая библиотека внедрена в стартовый проект.

Разное

Раскладка Бирмана

Это типографская раскладка, позволяющая вводить стрелки, кавычки-ёлочки, разные типы тире и прочие типографические символы без запоминания их кодов и/или на клавиатурах без цифрового блока.

Переключение раскладки

Нередко ошибаюсь с раскладкой при наборе, так как (стыдно), по-прежнему, часто смотрю на клавиатуру. Немного помогает Punto Switcher, но с раскладкой Бирмана он несколько глючит: показывает два пункта «Русский язык» и два «Английский язык», а ТП перестала отвечать на обращения.

Обмен скриншотами

Отправлять студенту или клиенту скриншот с какими-либо пояснениями прямо на картинке — это удобно. Использую для этого Monosnap.

Измерения на экране

Для измерений, получения цвета с экрана и в качестве экранной лупы (всё — по горячим кнопкам) использую PicPick.

Хранение паролей

Удобно хранить пароли в базе данных, можно делать пароли примерно такого вида: Gji%86gjl00ljg67c;s0-, а помнить придется лишь пароль к самой базе данных (если его забыть, то — всё тлен). Использую кросспатформенную KeePass и имею несколько резервных копий файла с паролями (все компьютеры, телефон, планшет).

Заключение

Поделитесь своими способами оптимизации рабочего процесса.

Использование Gulp с Craft

Все эти скучные задачи

Позвольте мне начать с того, что я действительно люблю программировать!

Каждый раз, когда я начинаю преобразовывать проекты в живой код, я волнуюсь и полон энергии. Все кажется новым и другим. Но в какой-то момент вы доходите до места, где вам нужно выполнять задачи, которые вы повторяете снова и снова для каждого проекта, и мой энтузиазм отстает. Установка файлов проекта, оптимизация изображений, минификация файлов CSS и javascript — необходимые, но утомительные вещи. Убедитесь, что вы не дублируете строки кода и удалили неиспользуемые файлы, убедитесь, что каждое правило CSS имеет префикс…

Я просто ненавижу эти задачи!

Нет ничего более утомительного, чем в десятый раз прочитать файл CSS, чтобы убедиться, что вы ничего не дублируете. И если вы похожи на меня, ваш эгоистичный ум заставит вас поверить в то, что вы не можете совершить такую ​​ошибку, и в конечном итоге вы пропустите ряд дубликатов.

Пару лет назад у меня был длинный список сервисов, которые я использовал для этих задач. Я часами копировал и вставлял код в онлайн-генераторы каждый раз, когда менял пару строк кода или добавлял ресурсы. А потом приходилось обновлять браузер после каждого изменения… да ладно! Не могу передать, сколько раз я думал: «Если бы мы только могли нанять кого-нибудь, чтобы сделать это для нас». Что ж, сегодня мы можем — таскраннеры FTW!

Что такое средства выполнения задач?

Короче говоря, средства выполнения задач — это инструменты Javascript, которые помогают нам автоматизировать все эти повторяющиеся, но важные задачи. Наряду с вашим текстовым редактором или IDE, это одни из наиболее широко используемых и важных инструментов для веб-разработки. Каждый раз, когда мы сохраняем нашу работу, средство запуска задач анализирует, компилирует, оптимизирует и, наконец, обновляет ваш браузер — и все это за доли секунды. Как это здорово?!

Сегодня у нас много таскраннеров и большинство разработчиков используют один из них. К ним относятся Grunt , Cake , Broccoli , и наш любимый инструмент: Gulp .

Как работает Gulp

1. Начнем с определения задачи, которую хотим выполнить.
2. В рамках этой задачи нужный набор файлов загружается в поток Gulp для обработки.
3. Когда файлы находятся в потоке, в них можно внести одну или несколько модификаций. Поскольку потоки обрабатываются в памяти, файловая система не выполняет запись во временные каталоги между модификациями.
4. Отправьте новые (возможно, измененные) файлы по указанному адресу

У Райана Ирелана есть отличный скринкаст, который поможет вам начать все сначала в Mijingo

Как мы используем Gulp с Craft

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

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

Наша команда использует Craft для управления контентом, который обрабатывает все наши шаблоны, поэтому нам не требуется механизм шаблонов. Но если вы работаете над интерфейсным прототипом, вы можете скомпилировать статический HTML, используя механизмы шаблонов, такие как Twig, Liquid, Haml или Jade.

Что дальше? Нам нужно придать нашему сайту стиль!

CSS

Итак, давайте начнем с процесса, который включает в себя большинство шагов — конвейера CSS.

Большинство современных разработчиков используют препроцессоры CSS. Это дает нам возможность сделать наш CSS удобным для сопровождения, разбив его на небольшие файлы «компонентов». В нашем процессе разработки мы используем Sass с синтаксисом SCSS, но вы также можете использовать Less или Stylus.

В основном это используется для компиляции файлов SCSS в наш основной файл CSS, но мы можем найти некоторые дополнительные применения в зависимости от того, как мы компилируем файлы для среды разработки или производства.

Во время разработки нам нужно быстро отлаживать наши ошибки. Это может быть сложно при использовании препроцессоров, потому что мы видим наш скомпилированный код, а не исходные файлы. Для отладки в местах, где написано правило CSS, мы используем исходные карты. Карты источников предоставляют информацию о том, в каком файле SCSS содержится правило и в какой строке оно записано.

Как насчет префиксов поставщиков?

Autoprefixer решает любые проблемы с префиксами, анализируя наши файлы CSS и добавляя префиксы поставщиков в правила CSS, используя базу данных Can I Use.

После того, как мы закончили разработку, нам нужно оптимизировать наш код для производства. Для этого мы используем плагин Gulp на основе CSSO — CSS Optimizer.

Javascript

Чтобы убедиться, что мы используем тот же стиль кода в наших файлах javascript и что наш javascript в равной степени свободен от ошибок, мы используем JSCS и JSHINT. Вы можете уже использовать их в своем текстовом редакторе, так как большинство IDE и текстовых редакторов теперь настроены на их поддержку.

JSCS — это линтер/форматтер в стиле кода, поэтому он проверяет, есть ли у нас правильные отступы, интервалы внутри скобок и сколько пустых строк мы используем в конкретных случаях. Вы можете настроить правила кодирования в соответствии со своими потребностями — подробнее об этом читайте здесь.

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

Мы планируем заменить JSCS и JSHint на ESLint в нашей сборке

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

Оптимизация изображений

Онлайн-сервисы по оптимизации изображений существуют уже довольно давно, так что в этом нет ничего нового. Но сколько времени тратится на ручную оптимизацию каждого изображения и сколько раз вам нужно повторить эту задачу? И как мы можем проверить и удалить изображения, которые мы больше не используем?

Используя подключаемый модуль Gulp для форматирования изображений, такой как gulp-imagemin, мы можем оптимизировать все изображения, которые мы используем для нашего проекта, с помощью одной простой команды.

Если вы являетесь пользователем Grunt, вы заметите, что я сказал «одна команда», и можете спросить, почему бы нам не создать задачу, которая «следит» за файлами изображений. Что ж… В Gulp есть встроенная функция «отслеживания», которая отслеживает изменения в текущем файле, но не проверяет наличие новых файлов. Поэтому мы не можем автоматизировать задачу, чтобы она срабатывала при добавлении нового файла. Однако, если вы поставили задачу для просмотра изменений внутри файлов CSS и JS, вы можете добавить задачу оптимизации изображения в качестве зависимости задачи Gulp и просто повторно запустить команду «наблюдать».

Спрайты SVG

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

Итак, позвольте мне дать вам краткое объяснение того, как работают спрайты SVG. Мы начинаем с создания одного большого изображения SVG, содержащего несколько маленьких изображений SVG. Мы включаем этот большой файл изображения SVG как часть нашего файла HTML, а затем вызываем одну из иконок, используя атрибут SVG xlink:href.

Для создания этого спрайта мы используем подключаемый модуль спрайта Gulp SVG, который оптимизирует и объединяет изображения SVG по желанию, но нам все еще нужно добавить эту разметку в наш HTML.

Для этого используем gulp-inject. Инъекция Gulp используется для добавления строки в нашу разметку, поэтому в основном она преобразует наш конкатенированный спрайт SVG в строку, которая позже добавляется туда, где мы хотим, чтобы она была размещена в нашем HTML.

В предыдущей версии настройки нашего проекта мы внедрили SVG в партиал с именем icons.html, который позже включили в верхнюю часть элемента body в разметке. Но в последней версии мы храним значки в локальном хранилище браузера. Вы можете узнать больше о преимуществах использования локального хранилища в этой замечательной статье Освальдаса Валутиса.

Browsersync

Итак, теперь нам нужно только обновить наш браузер, когда мы вносим некоторые изменения в нашу разметку. Позвольте представить вам Browsersync.

Этот плагин перезагружает браузер, когда мы вносим изменения в наш HTML или JS, и внедряет CSS каждый раз, когда вы вносите изменения в файлы SCSS. Он работает синхронно со всеми активированными браузерами и отслеживает взаимодействие на веб-сайте. Например, если вы заполняете форму в браузере настольного компьютера, вы можете одновременно проверить то же поведение на планшете или мобильных устройствах.

EditorConfig

EditorConfig на самом деле не используется с Gulp, но по-прежнему является очень важной частью нашей настройки разработки. EditorConfig — это файл, который помогает нам определять и поддерживать согласованные стили кодирования между различными редакторами и IDE. Короче говоря, это гарантирует, что все в нашей команде используют одни и те же отступы или набор символов.

Большинство текстовых редакторов и IDE имеют встроенную встроенную поддержку EditorConfig, но для некоторых из них (например, для моего любимого Sublime Text) вам потребуется добавить плагин.

Почему мы предпочитаем Gulp

Почему мы предпочитаем Gulp Grunt или какой-нибудь более новой программе, такой как Webpack?

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

Мы начали с GruntJS в качестве нашего первого средства запуска задач, и его было очень удобно использовать. Но с GruntJS у вас очень сложная конфигурация. Каждый шаг, который вы делаете во время одной задачи Gulp, вы должны записать как задачу. Если вы помните, в моем объяснении того, как работает Gulp, я упомянул, что все сохраняется в «потоке», пока мы не выведем это в файл. К сожалению, Grunt требует файл для каждого шага.

Горячая замена модуля Webpack — настоящая революция

А как насчет Webpack?

Webpack очень мощный и эффективный. Он включает в себя расширенные функции, такие как замена горячего модуля, что является настоящей революцией. Он также имеет возможность импортировать файлы CSS из вашего JS и другие функции, которых нет в Gulp и Grunt. Однако кривая обучения намного круче, и я не уверен, что эти функциональные возможности приносят разработчикам веб-сайтов достаточную пользу, чтобы компенсировать объем необходимого обучения.

Тем не менее, если вы в основном занимаетесь разработкой веб-приложений, я настоятельно рекомендую использовать Webpack.

Что еще мы можем сделать с Gulp?

В нашем процессе разработки есть еще несколько шагов, которые мы не встроили в нашу конфигурацию Gulp, но мы находим их очень интересными.

Мы создали bash-скрипт для загрузки последней версии Craft CMS и замены файлов конфигурации Craft на наши. Это то, что мы планируем перенести в Gulp, чтобы не использовать слишком много инструментов в нашем процессе.

Мы также хотели бы перенести наш процесс развертывания/синхронизации в Gulp из DeployHQ.

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

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

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

Во-первых, вам не нужно следить за всеми мелкими вещами. Это помогает вашему мозгу обрабатывать более важные вопросы, такие как «Используем ли мы передовой опыт при запросе данных в Craft?» или «Нужно ли нам создавать разные компоненты, чтобы сделать наш код модульным?»

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

Если Gulp так хорош, почему его не используют все?

Многие разработчики боятся Gulp и других препроцессоров, так как они могут показаться очень сложными, особенно если вы не знакомы с javascript. Но вам не нужно по-настоящему понимать javascript, чтобы работать с Gulp, и на самом деле это не так сложно, как кажется. Вот отличная статья, чтобы начать работу с Gulp. Поверьте мне, вы очень скоро почувствуете себя волшебником Gulp.