Gulp Awesome

Задачи Gulp

HTML-разметка

Задача $ gulp html

Страницы, которые необходимо сверстать размещаются в корне каталога src/ (пример index.html) Файлы html повторяющихся блоков (например, общий header, footer, модальные окна и т.д.) размещаются в каталоге src/html-blocks/ :

• src/html-blocks/common - файлы html-блоков, использующиеся на всех страницах сайта
• src/html-blocks/common/modals - файлы html модальных окон, использующихся на всех страницах сайта
• src/html-blocks/pages--external - файлы html-блоков, внешних страниц сайта (страниц, доступных любому пользователю без авторизации на сайте)
• src/html-blocks/pages--internal - файлы html-блоков, внутренних страниц сайта (страниц, доступных залогиненному пользователю - например, страницы раздела "Личный кабинет")

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

Для указания того содержимое какого файла необходимо вставить используется конструкция вида

<!--build:include html-blocks/pages--external/file-name.html-->
This will be replaced by the content of html-blocks/pages--external/file-name.html
<!--/build-->

Допускается использование вложенности, то есть в одном файле, содержащим код html-разметки блока, можно вызвать содержимое другого файла с блоком разметки. При этом необходимо учитывать правильное написание пути к файлу.
Например,
В файле src/html-blocks/pages-external/header--external.html мы хотим вызвать содержимое файла src/html-blocks/common/modals/login.html В таком случае вызов пишеться так

<!--build:include ../common/modals/login.html-->
This will be replaced by the content of ../common/modals/login.html
<!--/build-->

Компиляция Less

Задача $ gulp less

Файл src/styles/styles.less является диспетчером подключений для всех прочих less-файлов.
Секция Third party предназначена для подключения less/css файлов сторонних библиотек и фреймворков.
Секция Custom - для подключения собственных файлов стилей.

При компиляции происходит объединение всех файлов, компиляция в CSS, форматирование стиля кодирования, добавление вендорных префиксов, минификация и запись sourcemaps. Итоговые файлы стилевых таблиц помещаются в каталог build/css (style.css, style.min.css, style.min.css.map)

Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками.

Компиляция JavaScript

Задача $ gulp js

Файл src/js/vendor.js является диспетчером подключений js файлов сторонних библиотек и фреймворков. Файл src/js/custom.js является диспетчером подключений собственных js файлов.

При компиляции происходит объединение всех файлов, проверка на наличие ошибок (при этом исключаются из проверки файлы сторонних библиотек и проверяются только те, что написаны нами), минификация и запись sourcemaps. Итоговый файл помещается в каталог build/js (main.js, main.min.js, main.min.js.map)

Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками.

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

Задача $ gulp images

Все контентные изображения, а также любые изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог src/img/images.

При выполнении задачи все изображения из этого каталога оптимизируются.
Итоговые файлы помещаются в каталог build/img/images/.

Оптимизация SVG

Задача $ gulp svg

Все SVG изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог src/img/svg.
При выполнении задачи все SVG из этого каталога оптимизируются.
Итоговые файлы помещаются в каталог build/img/svg/

Создание PNG-спрайта

Задача $ gulp png-sprite

Все изображения, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог src/img/sprites/png.
Итоговый спрайт будет оптимизирован и помещен в каталог build/img/sprites/png/png-sprite.png.
Также будет создан или дополнен файл src/styles/common/_png-sprite.less, содержащий примеси (mixins) для вызова изображений спрайта.
Имя примеси (mixin) всегда выглядит как @sprite-filename, где filename - имя изображения, добавленного к спрайту.

Пример работы с спрайтом и его стилями.

• Размещаем png-изображение иконки в каталоге src/img/sprites/png/html5.png
• Запускаем задачу $ gulp png-sprite
• Создаем файл src/styles/common/icons.less
• В нем создаем следующие CSS-классы:

  .png-sprite{
              &:before{
                  content: '';
                  display: inline-block;
              }
  
              &--html5:before{
                  .sprite(@sprite-html5);
              }
          }

• Файл src/styles/common/icons.less подключаем в src/styles/style.less с помощью конструкции @import (@import "common/icons.less";)
• После компиляции less (запускаем задачу $ gulp less)получаем следующий CSS код

          .png-sprite:before{
              display: inline-block;
              content: '';
          }
  
          .png-sprite--html5:before{
              width: 24px;
              height: 24px;
              background-image: url(../img/sprites/png/png-sprite.png);
              background-position: 0 0;
          }

• html-тегу, около которого надо разместить иконку, добавляем CSS-классы png-sprite png-sprite--html5

Пример: Test PNG sprite

Работа с спрайтом в таком случае сводится к добавлению нужных изображений в каталог src/img/sprites/png
и созданию CSS-класса, в котором вызывается примесь (mixin), созданная при генерации спрайта.
Вы можете использовать примеси (mixins) и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before

Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо

• добавить в каталог src/img/sprites/png изображение (html5.png)
• запустить задачу $ gulp png-sprite

Создание Retina-ready PNG-спрайта

Для создания PNG-спрайта адаптированного под Retina-экраны и экраны повышенной плотности, необходимо в каталог src/img/sprites/png поместить файл изображения вдвое большего размера, чем он должен отображаться. Имя файла обязательно должно содержать постфикс -2x (filename-2x.png).
Обязательным условием для корректной работы является наличие двух файлов изображений для одной иконки (например, html5.png и html5-2x.png).
В результате генерации спрайта создается спрайт build/img/sprites/png-sprite-2x.png и переменная вида @sprite-filename-group, (например, @sprite-html5-group).
Для вызова данной переменной (mixin) необходимо использовать примесь (mixin) .retina-sprite() Например, .retina-sprite(@sprite-html5-group).

Пример файла icons.less:

.png-sprite{
              &:before{
                content: '';
                display: inline-block;
              }

              &--html5:before{
                .sprite(@sprite-html5);
              }

              &--html5-retina:before{
                .retina-sprite(@sprite-html5-group)
              }
            }

Пример использования в разметке: Test Retina-ready PNG sprite

Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода Retina изображений необходимо

• добавить в каталог src/img/sprites/png два изображения - обычное и вдвое большее, отличающиеся в названии постфиксом -2x (html5.png, html5-2x.png)
• запустить задачу $ gulp png-sprite

Создание SVG-спрайта

Задача $ gulp svg-sprite

Все SVG, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог src/img/sprites/svg.
Итоговый спрайт будет оптимизирован и помещен в каталог build/img/sprites/svg/svg-sprite.svg.
Также будет создан или дополнен файл src/styles/common/_svg-sprite.less, содержащий CSS-классы для вызова изображений спрайта.
Имя CSS-класса всегда выглядит как @svg-sprite-filename, где filename - имя изображения, добавленного к спрайту.

Пример работы с SVG-спрайтом и его стилями.

• Размещаем svg-изображение иконки в каталоге src/img/sprites/svg/html5.svg
• Запускаем задачу $ gulp svg-sprite
• Создаем файл src/styles/common/svg-icons.less
• В нем создаем следующие CSS-классы:

  .svg-sprite{
                    &:before{
                      content: '';
                      display: inline-block;
                      width: 32px!important;
                      height: 32px!important;
                      background-size: contain!important;
                    }
  
                    &--html5-icon:before{
                      .svg-sprite--html5(); // CSS-класс, созданный при генерации SVG-спрайта.
                    }
  
                  }

• Файл src/styles/common/svg-icons.less подключаем в src/styles/style.less с помощью конструкции @import (@import "common/svg-icons.less";)
• После компиляции less (запускаем задачу $ gulp less)получаем следующий CSS код

  .svg-sprite--html5
                      {
                          width: 47px;
                          height: 47px;
  
                          background-image: url('../img/sprites/svg/svg-sprite.svg');
                          background-repeat: no-repeat;
                          background-position: 0 0;
                          background-size: 47px 47px;
                      }
                      .no-svg .svg-sprite--html5
                      {
                          background-image: url('../img/sprites/svg/svg-sprite.png');
                      }
  
  
                      .svg-sprite:before
                      {
                          display: inline-block;
  
                          width: 32px!important;
                          height: 32px!important;
  
                          content: '';
  
                          background-size: contain!important;
                      }
                      .svg-sprite--html5-icon:before
                      {
                          width: 47px;
                          height: 47px;
  
                          background-image: url('../img/sprites/svg/svg-sprite.svg');
                          background-repeat: no-repeat;
                          background-position: 0 0;
                          background-size: 47px 47px;
                      }
                      .no-svg .svg-sprite--html5-icon:before
                      {
                          background-image: url('../img/sprites/svg/svg-sprite.png');
                      }

• html-тегу, около которого надо разместить иконку, добавляем CSS-классы svg-sprite svg-sprite--html5-icon

Пример: Test PNG sprite

Работа с SVG-спрайтом в таком случае сводится к добавлению нужных SVG в каталог src/img/sprites/svg
и созданию CSS-класса, в котором вызывается в качестве примеси (mixin) CSS-класс, созданный при генерации спрайта.
Вы можете использовать CSS-классы и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before

Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо

• добавить в каталог src/img/sprites/svg изображение (html5.png)
• запустить задачу $ gulp svg-sprite

Livereload и синхронизация между браузерами

Задача $ gulp webserver

При выполнении задчи запускается локальный веб-сервер BrowserSync и открыватся index.html проекта.
Подробнее о BrowserSync

Сервер использует каталог build/ в качестве корня проекта.
При запуске формируются следующие данные:

[App Front-End] Access URLs:
 ----------------------------------------------
       Local: http://localhost:9000 // локальный URL проекта
    External: http://192.168.0.100:9000 // внешний (в пределах локальной сети) URL проекта (по нему можно открыть на других устройствах в той же сети)
      Tunnel: https://iuvrvzmmli.localtunnel.me // Туннель - защищенный уникальный URL, можно дать человеку на другом конце мира и он также будет видеть все обновления в реальном времени
 ----------------------------------------------
          UI: http://localhost:3001 // локальный URL WebUI BrowserSync
 UI External: http://192.168.0.100:3001 // внешний (в пределах сети) URL WebUI BrowserSync
 ----------------------------------------------
[App Front-End] Serving files from: ./build // корень проекта для BrowserSync
            

Обработка шрифтов

Задача $ gulp fonts

Файлы используемых шрифтов необходимо размещать в каталоге src/styles/fonts.
При обработке шрифты будут скопированы в каталог build/css/fonts.
Важно корректно прописать к ним пути в файле Less, описывающим типографику.

Очистка каталога сборки

Задача $ gulp clean

При выполнении задачи полностью удаляется содержимое каталога build/ за исключением файла build/.gitignore

Публикация на Github Pages

Задача $ gulp gh-pages

При запуске задачи будет создана ветка gh-pages и в нее залито текущее состояние каталога build/.

Полная сборка проекта

Задача $ gulp build

При запуске задачи последовательно выполняются задачи clean, html, js, less, images, png-sprite, svg-sprite, svg, fonts, gh-pages.
В итоге выполнения в каталоге build/ формируется полная сборка проекта с нуля.

Отслеживание изменений

Задача $ gulp watch

При запуске сначала выполняется задача $ gulp webserver, затем при изменении или добавлении в каталоге src/ каких либо файлов, автоматически запускается соответсвующая задача по их обработке.

Настройки шаблона

В файле gulpfile.js в секции Settings в разделе Path settings задаются пути к каталогам размещения обработанных файлов (итогов сборки), исходных файлов и путей для отслеживания изменений.
Рекомендуется изменять пути и целевые файлы только через этот раздел, при необходимости его дополняя новыми переменными.