Конфигурация сборщика проектов Gulp
Часто делаю сайты на CMS и пока не освоил для них сборщики проектов. Однако, встречаются и простенькие сайты на чистом html, при разработке которых я использую сборщик проектов Gulp.
Основы
У меня было несколько попыток создать удобную конфигурацию сборщика, в последнем проекте мне это более менее удалось. Чего хотелось добиться от Gulp:
- Компиляция sass/scss, автопрефиксы и другие полезности для css
- Создание спрайта + создание к нему css стилей
- Минификация кода js, css, склейка
- Оптимизация watch’еров, чтобы при задачи отрабатывали 1 раз после изменений, а не дублировалась отработка задач по цепочке.
- Работа с PHP файлами
- Автоперезагрузка окна браузера в случае изменений без использования сторонних расширений
- Обработка ошибок. Т.к. делаю на виртуальном удаленной машине, то иногда в процессе загрузки картинок, исходных файлов — создаются временные файлы. Watcher их видит и в итоге мы получаем ошибку сборщика, приходится запускать все сначала. Необходимо было исключить ситуацию с завершением работы сборщика после получения ошибки.
Для работы Gulp необходимо, чтобы был установлен NPM пакетный менеджер, затем устанавливаем сам глобально сам gulp:
1 | npm install --global gulp |
В конце статьи приведен полный листинг конфигурации. Сейчас разберем его по частям.
Gulp позволяет подключать разнообразные модули и использовать их для сборки. Соответственно, прежде, чем вызвать модуль из файла конфигурации — необходимо его загрузить. Делается это просто через менеджер пакетов npm:
1 | npm install gulp-sass |
В данном случае мы загрузим модуль gulp-sass в директорию node_modules. Однако, нам необходимо сделать переносимым набор модулей для установки (например, храним проект в git), поэтому нужен файл, в котором будут сохранены все наши модули, которые затем можно будет установить одной командой (npm install или npm update). Для этого у npm сборщика есть конфигурационный файл (листинг его приведен в конце статьи), можно добавлять пакеты напрямую в него (создать чистый файл можно командой npm init), а можно при установке добавить ключи —save или —save-dev
1 | npm install gulp-sass -save |
О различиях в этих ключах можно прочитать в официальной документации. Вкратце — через менеджер пакетов npm можно установить пакеты, необходимые для работы приложения, а можно установить в дополнение к основным — пакеты для разработки, которые на продакшене не особо нужны, главное грамотно их разделить.