Доброго времени суток!

Сегодня я продемонстрирую мой конфиг для gulp, которым я собираю свои проекты. Я не претендую на 100% правильность и полноту описания всех возможностей. Может кто-нибудь подчерпнет идеи для своих проектов.

Расскажу об основных моментах:

  1. Начинается все с task’а default
  2. Каждый раз когда я запускаю gulp я хочу чтобы он сразу пересобрал проект (на случай, если я что-то уже поправил, а gulp забыл включить)
  3. Подключаю livereload для CSS файлов (чтобы не перезагружать страницу каждый раз)
  4. Ставлю 2 watch на css и js файлы, которые выполняют те же task, что и во 2-ом пункте

Теперь о каждом task в отдельности:

  1. Styles (CSS)
    1. В своих проектах я использую Font-Awesome. Я не хочу конкатенировать этот файл в свой css, поэтому файл должен лежать в той же папке что и css, но отдельным файлом. Т.к. каждый раз перед task “styles” вызывается task “clean”, который очищает папку css, то необходимо, чтобы файл font-awesome.min.css копировался в целевую папку.
    2. Дальше начинается обработка Compass файлов. Основная идея состоит в том, что у меня есть 1 файл application.scss, в котором я подключаю все остальные файлы (header.scss, content.scss, footer.scss …). Я это сделал для того, чтобы потом не разбираться с дублированием CSS и конкатенацией файлов. Конечно возникает проблема, что моя IDE не понимает откуда я беру переменные, находящиеся в других файлах, но я согласен с этим мириться. (Если кто-то знает как собрать все scss файлы в один без дублирования @import, то расскажите мне)
    3. Из интересных моментов хочется отметить plumber – это плагин, который перехватывает все ошибки, которые будут ниже по pipe и позволяет обрабатывать их в одном месте. (Грубо говоря он к каждой функции добавляет .on(‘error’, function(){…}) к каждой функции. Если Вас заинтересовала эта тема советую просвятиться тут.
    4. Notify я использую несколько модифицирован. Исключительно в эстетических целях в него добавлен title и icon, а message выводится название файла, который был только что собран.
    5. В конце вызывается livereload, которая без перезагрузки страницы обновляет css файл
  2.  Scripts (JS)
    1. В этом task все очень похоже, но есть несколько своих особенностей. Чтобы лучше их понять нужно знать структуру файлов
      /js
      hlebon  мои файлы
      min  результирующий минифицированный файл
      ./  библиотеки, которые я использую в своем проекте (jQuery…)
    2. Идея состоит в том, чтобы собрать все мои личные файлы из /js/hlebon в 1 файл в папку /js/, где уже находятся библиотеки.  Основной момент состоит в том чтобы файлы конкатенировались в определенном порядке. Для регулирования порядка я просто перечисляю все файлы в том порядке, которым мне нужен. Если бы я не указывал его, то файлы собирались по алфавиту.
    3. А затем все эти файлы (мой общий + библиотеки) сконкатенировать в один и положить в /js/min

Как-то так…