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

Конфигурация gulp

Итак, вернемся к файлу конфигурации gulp.

Первый блок — мы подгружаем модули в переменные, чтобы удобно было с ними работать в процессе настройки сборщика:

В случае, если какой из модулей не загружен и не может быть найден — при запуске сборщика мы получим ошибку невозможности загрузить тот или иной модуль. Краткое описание модулей:

  • gulp-sass — работа с scss, sass
  • gulp-concat — объединение файлов
  • gulp-clean — удаление файлов
  • gulp-plumber — отлавливает ошибки gulp и позволяет не завершать работу сборщика
  • gulp-minify-css — минифицирует css файлы
  • gulp-autoprefixer — добавляем вендорные префиксы в css
  • gulp-jshint — jshint для gulp, следит за правильностью js кода
  • gulp-connect-php — обработка php файлов (необходим php интерпретатор на машине)
  • gulp-rename — механизм переименования файлов
  • gulp.spritesmith — генерация спрайтов и css к ним
  • browser-sync — live-reload функционал без использования расширений браузера

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

Далее идет блок настроек, где указаны пути в нашем приложении:

Сразу хочу заметить, что конструкция вида **/*.js означает поиск файлов во вложенных папках

Далее определяем обработчик ошибок и перенос статичных файлов из папки static в корень проекта

Прошу заметить, что в каждой задаче task  мы задаем обработчик ошибок.

Далее настраиваем склейку спрайтов. Я не представляю — как я раньше не пользовался подобным инструментом. Сейчас его использую во всех проектах:

Мы можем настроить вывод в чистый css, а можно сделать в scss, это удобно, когда мы не можем элементу задать конкретный класс, поэтому через scss наследуем правило из сгенерированного файла. Более детальную настройку можно посмотреть в документации плагина. Так же тут используется шаблон css файла, находящийся в файле

Для исключения каких-либо ошибок при сборке — я предпочитаю чистить директорию build и tmp перед следующими задачами:

Далее переходим к обработке css стилей

Как видно, задачи две. При том prestyle вызывается из style. В prestyle мы делаем сборку scss, далее мы склеиваем все css файлы, минифицируем и в конечном результате получаем всего один файл.

Переходим к js компиляции

Здесь аналогично 2 задачи, одна из которых вызывается по цепочке. Аналогично, сначала обрабатываем свой файл со скриптами, затем объединяем его с файлами библиотек и компилируем в один файл. Во время разработки полезно генерировать sourcemap файлы, которые позволяют легко отлаживать ошибки. В продакшн их лучше убрать.

Далее идет уже техническая настройка gulp — настройка вотчеров (следим за измененными файлами и выполняем необходимые задачи), настройка сервера livereload и обработки php файлов и создание порядка запуска задач при первом запуске gulp

На следующей странице приведен полный листинг кода всех необходимых файлов.

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