Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Gulp для автоматизации с WordPress

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

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

Что такое Gulp

Gulp - система для сборки и автоматизации проектов, основанная на потоках. Возможно вам доводилось слышать или использовать grunt. Однако в последнее время gulp становится более популярным. Благодаря ему вы можете компилировать LESS/Sass, JS файлы, настроить автоматическую перезагрузку веб-страниц и многое другое.

Почему стоит использовать Gulp

Он поможет вам сохранить уйму время, автоматизировав повторяющиеся задачи. И самое лучшее - вы можете указать ему, что делать, не полагаясь на сторонние инструменты для выполнения определённого функционала. Проще говоря, вы можете создать свой инструмент для автоматизации необходимых задач.

Требования

Перед тем как начать вам понадобится установленный Node.js (версии 0.10.30 или выше). Лично я предпочитаю использовать Node Version Manager (NVM) для переключения между различными версиями Node.js, на моём компьютере, который я использую для разработки.

Давайте начнём

Сперва установите gulp. Для этого запустите следующую команду в терминале.

gulp будет установлен глобально на вашем компьютере.

Начнём настраивать инструмент для автоматизации, создав директорию в каталоге с WordPress темой или в другом месте, которые вам больше по душе.

В моём случае я перейду в каталог с темой...

... и запущу следующую команду.

Теперь я перейду в созданный каталог и инициализирую npm проект.

Будут заданы несколько вопросов, таких как название проекта, версия, описание, автор, лицензия и прочее.

Вы можете либо ответить на них, либо продолжать нажимать Enter когда показывается yes. В конце напишите yes и нажмите Enter ещё раз.

В директории будет создан файл package.json. В нём содержится информация о проекте и его зависимостях.

Если вы следовали инструкциями, ваш package.json будет выглядеть следующим образом:

Первый Gulp файл

Установите gulp локально для вашего проекта.

Будет создана директория node_modules, в данной папке будут располагаться все зависимости проекта. --save-dev используется для добавления dev-dependencies в package.json.

Создайте gulpfile.js в директории проекта со следующим кодом.

В терминале введите gulp и нажмите Enter. Вы увидите как текст выше будет выведен в консоль.

Создаём инструмент для компиляции Sass

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

  1. gulp-sass (простой и легкий в использовании)
  2. gulp-compass (отлично работает с проектами, в которых используется compass)
  3. gulp-ruby-compass (данный плагин предоставляет больше контроля, по сравнению с двумя другими)

Для простоты, в этом туториале я буду использовать первый, gulp-sass.

Запустите следующую команду в директории проекта, чтобы установить его.

Давайте обновим код, добавив компиляцию Sass файлов в CSS.

И добавим require на верху gulpfile.

Теперь после запуска, gulp sass в терминале, таск будет запущен.

Также, так как я добавил данный таск в массив таксков по умолчанию, при запуске gulp в терминале, таск по умолчанию запустится, который включает sass таск.

Все файлы в css/src директории проекта, будут скомпилированы и сохранены в css каталог. Можно передать дополнительные опции функции sass(), в зависимости от ваших потребностей.

Запуск gulp и gulp sass, на данный момент делают одно и тоже.

Линтинг и компиляция JS файлов

Далее, чтобы иметь правильно написанный и упакованный JavaScript код в наших темах, используем gulp-jshint и gulp-concat.

Добавим require на верху gulpfile

Добавим следующий gulp таск, для линтинга и соединения всех js файлов.

Если хотите добавить больше организации, создайте vendor и theme каталоги внутри js/src. Каталог vendor содержит сторонние библиотеки, такие как к примеру jQuery плагины, в директории theme будет находится JavaScript код написанный вами, необходимый теме.

Если данные файлы потребуется минифицировать, можно добавить плагин gulp-uglify. Давайте обновим таск по умолчанию.

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

Самые популярный плагин для решения данной задачи - gulp-imagemin. Установите его:

Добавьте require gulp-imagemin сверху gulpfile:

И добавьте следующий таск.

Мы сможем получить оптимизированные копии изображений из каталога img/src в директорию img.

Добавьте к списку тасков по умолчанию.

Watch таск

Далее настроим watch для автоматизации тасков.

Добавим это в список тасков по умолчанию:

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

Что произойдёт если во время запуска какого-либо таска, появятся ошибки? Gulp остановит свою работу.

Для предотвращения этого, используем отличный плагин под названием gulp-plumber. Помимо этого воспользуемся плагином gulp-notify, для вывода сообщения (нотификации) об ошибках.

Установите gulp-plumber и gulp-notify:

Опять же добавьте require на верху gulpfile.

Ниже, полезные настройки plumber, которые я использую на тот случай, если возникнут ошибки во время работы тасков.

Теперь обновлённый sass таск будет выглядеть следующим образом:

Обратите внимание, был добавлен plumberErorHandler. Таким же образом я добавлю plumber в js и img таски.

Live Reload

Одна необходимая вещь, которую стоит добавить, функционал live realod, автоматическая перезагрузка страниц.

Для начала поставьте расширение/аддон для live reload:

Далее установим gulp-livereload:

Ещё раз добавьте require к gulpfile.

Давайте обновим наши таски, добавив live reload.

Таск sass будет выглядеть следующим образом:

Похожим образом добавьте livereload для js и img тасков. В конце концов добавьте livereload.listen(); в начале watch таска.

Чтобы проверить работу livereload, создайте index.php со следующим кодом.

И файл style.css.

Теперь активируйте нашу тему через панель управления WordPress. Мы настроили основную рабочую среду и можем начинать её использовать. Запустите gulp в терминале и откройте активированную тему в браузере. Нажмите на расширение live reload, для подключения к серверу, тем самым будут отслеживаться изменения.

Каждый раз при изменении контента в css/src или js/src, gulp будет следить за данными файлами и компилировать их, после чего браузер будет перезагружен.

Немного продвинутого функционала

Теперь в вашем распоряжении есть инструмент для создания нескольких, различных тем, давайте перенесём файлы в другую директорию wp-content/themes/wp-gulp-automation/theme-boilerplate.

Скопируйте index.php и style.css в css, img и js в theme-boilerplate.

Это основной шаблон темы theme-boilerplate. Вы можете использовать его или тот, который вам больше понравится.

basic theme boilerplate

Для последнего таска нам понадобятся три Node.js модуля. Установите json-file, node-fs и fs-extra.

Добавьте их сверху gulpfile.

Добавьте таск в gulpfile.

Теперь вам нужно создать новую тему в wp-content/themes используя код шаблона, указав themeName в package.json.

packagejson contents

И запустив:

Теперь у вас есть два каталога:

  1. wp-gulp-automation (инструмент для всех ваших тем)
  2. myNewTheme (новая тема)
wp-contents themes folder structure

Возможности по кастомизации бесконечны.

Вы можете использовать CoffeeScript вместо обычного JavaScript и настроить gulp на отслеживание изменений. Добавить больше тасков в зависимости от нужд рабочего процесса. У меня есть несколько идей для тасков.

  • Удаление .DS_Store, .thumb файлов или других ненужных файлов, автоматически
  • добавление темы в zip архив для дальнейшей отправки на Themeforest

Спасибо за то что прочитали статью! Если захотите что-то добавить или создать новый таск, которым у вас есть желание поделиться с другими, не стесняйтесь.

Полезные ссылки

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.