Конфигурация сборщика проектов Gulp

Часто делаю сайты на CMS и пока не освоил для них сборщики проектов. Однако, встречаются и простенькие сайты на чистом html, при разработке которых я использую сборщик проектов Gulp.

Основы

У меня было несколько попыток создать удобную конфигурацию сборщика, в последнем проекте мне это более менее удалось. Чего хотелось добиться от Gulp:

  1. Компиляция sass/scss, автопрефиксы и другие полезности для css
  2. Создание спрайта + создание к нему css стилей
  3. Минификация кода js, css, склейка
  4. Оптимизация watch’еров, чтобы при задачи отрабатывали 1 раз после изменений, а не дублировалась отработка задач по цепочке.
  5. Работа с PHP файлами
  6. Автоперезагрузка окна браузера в случае изменений без использования сторонних расширений
  7. Обработка ошибок. Т.к. делаю на виртуальном удаленной машине, то иногда в процессе загрузки картинок, исходных файлов — создаются временные файлы. Watcher их видит и в итоге мы получаем ошибку сборщика, приходится запускать все сначала. Необходимо было исключить ситуацию с завершением работы сборщика после получения ошибки.

Для работы Gulp необходимо, чтобы был установлен NPM пакетный менеджер, затем устанавливаем сам глобально сам gulp:

В конце статьи приведен полный листинг конфигурации. Сейчас разберем его по частям.

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

В данном случае мы загрузим модуль gulp-sass в директорию node_modules. Однако, нам необходимо сделать переносимым набор модулей для установки (например, храним проект в git), поэтому нужен файл, в котором будут сохранены все наши модули, которые затем можно будет установить одной командой (npm install или npm update). Для этого у npm сборщика есть конфигурационный файл (листинг его приведен в конце статьи), можно добавлять пакеты напрямую в него (создать чистый файл можно командой npm init), а можно при установке добавить ключи —save или —save-dev

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

  • Страницы
  • 1
  • 2
  • 3
  • 4