Разрабатывайте темы для WordPress быстрее вместе с Gulp

Разрабатывайте темы для WordPress быстрее вместе с Gulp

От автора: одна из составляющих успеха тем WP – простота их разработки. Разработчик со знаниями front-end’а и PHP может ознакомиться с замечательным кодексом и приступить к созданию своего нового шедевра.

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

копирование новых PHP-файлов темы;

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

компиляция Sass SCSS файлов в один минифицированный CSS-файл;

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

объединение упорядоченных JS-файлов, удаление отладочного кода и минификация;

автоматическое обновление браузера после пересохранения файлов.

Что такое Gulp?

Gulp – JS-система, которая берет ваши файлы и оптимизирует их. Если вы не работали в Gulp, пожалуйста, прочитайте введение в Gulp.js. Там описан процесс установки и указаны инструкции по работе с сервисом. Установка вкратце:

установите Node.js;

выполните глобальную установку Gulp: npm install gulp-cli –g;

создайте папку проекта и перейдите в нее: mkdir mytheme и далее cd mytheme;

инициализируйте проект с помощью npm: npm init.

Файлы проекта

Для создания чего-либо в Gulp (или другом таск раннере) необходимы исходные файлы: неизмененный код и изображения. Эти файлы обрабатываются, изменяются и минифицируются в файлы билда.

WordPress должен быть установлен в папку на веб-сервере, например, в /var/www/ на Linux/Apache. Тема для WP должна располагаться в своей папке в директории /wp-content/themes/. Папка с файлами билда в таком случае будет /var/www/wp-content/themes/mytheme/. По минимуму темам нужно два файла:

файл стилей style.css с метаданными в комментариях в верхней части;

файл шаблона index.php.

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

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

исходными файлами темы можно управлять из одной папки и репозитория, не загрязняя билд или папки WP;

папка с конечной темой содержит только нужные файлы;

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

В папке исходного проекта необходимо создать еще 4 папки:

template – PHP-файлы темы WP;

images – изображения вашей темы;

scss – файлы Sass SCSS;

js – любое количество исходных файлов клиентского JS.

Установка зависимостей

Из исходной папки (~/mytheme/) запустите следующую npm-команду для установки Gulp и всех плагинов:

Создастся папка node_modules, в ней будет храниться код модулей. Эту папку необходимо исключить из системы управления версиями (для пользователей Git, добавьте node_modules в файл .gitignore).

Создание файла настроек Gulp

В корне исходной папки создайте файл настроек gulpfile.js. Добавьте следующий код:

В коде мы определяем папки по умолчанию, загружаем модули, после чего создаем задачу php, которая будет копировать и обновлять файлы в папке с темой. Задача специально сделана очень простой, чтобы она копировала PHP-файлы как есть.

Сохраните gulpfile.js и создайте несколько файлов .php в папке template. Введите следующую команду:

Все файлы будут скопированы в папку с темой (/var/www/wp-content/themes/mytheme/).

Обработка изображений

Часто файлы изображений сжимают с помощью инструментов типа imagemin. Добавьте следующий код в файл gulpfile.js:

Сохраните и запустите команду gulp images. Сжатые версии новых или обновленных изображений из исходной папки images будут скопированы в /var/www/wp-content/themes/mytheme/images/.

Компиляция Sass

WP не может напрямую использовать файлы Sass, их нужно компилировать в один файл style.css. Добавьте в gulpfile.js следующий код:

Запустите новую задачу с помощью команды gulp css, чтобы:

первой запустилась команда images (в CSS могут быть нужны изображения);

скомпилировать Sass-код в исходном файле scss/style.scss с помощью быстрого компилятора LibSass;

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

с помощью PostCSS автоматически добавить ссылки на файлы, применить вендорные префиксы, запаковать медиа запросы, а также минифицировать конечный CSS-код;

сохранить стили в /var/www/wp-content/themes/mytheme/style.css;

принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).

В исходном файле scss/style.scss вверху должны быть метаданные WP-темы. Например:

Крайне важно, чтобы первой строкой шли символы /*!. Эти символы нужны минификатору cssnano. Без них он удалит комментарий, что сделает тему непригодной для использования.

Плагин postcss-assets позволяет ссылаться на изображения следующим образом:

Также можно инлайнить изображения с помощью автоматической кодировки Base64:

Обработка JavaScript

Добавьте следующий код в gulpfile.js:

Запустите новую задачу с помощью команды gulp js, чтобы:

обработать все JS-файлы в папке js;

отсортировать файлы, а также добавить в верхнюю часть JS-файлов комментарии с зависимостями;

конкатенировать все в один файл;

отрезать весь отладочный код и логи;

минифицировать код;

сохранить конечный код в /var/www/wp-content/themes/mytheme/js/scripts.js;

принудительно перезагрузить CSS с помощью Browsersync (более подробно немного позже).

Запускаем все

Чтобы не вызывать все задачи по отдельности, в gulpfile.js можно добавить следующую строку:

Теперь с помощью команды gulp build можно параллельно запустить задачи php, js, css и images. Обратите внимание на то, что images является зависимостью в задаче css, поэтому вызывать ее напрямую нельзя.

Включаем проверку файлов и Browsersyncs

Ваш рабочий процесс можно радикально улучшить, если:

позволить Gulp проверять изменения в файлах перед запуском соответствующей задачи;

автоматически перезагружать CSS и JS файлы после внесения изменений (без обновления страницы);

автоматически обновлять страницу при изменении файла шаблона.

Во-первых, в файле gulpfile.js нужно создать задачу browsersync. Это создаст прокси-сервер для вашего сервера с WP на localhost (измените домен или используйте IP-адрес):

Теперь добавьте задачу watch для запуска Browsersync, проверки файлов на изменения, а также для запуска соответствующей задачи:

И наконец, добавьте задачу default, которая будет запускать первоначальную сборку и стартовать задачу watch:

Теперь запустите gulp в командной строке. В консоли отобразятся похожие строки:

Разрабатывайте темы для WordPress быстрее вместе с Gulp

Чтобы не загружать ваш сайт с http://localhost/, укажите адрес http://localhost:3000/ или внешний URL, если просматриваете сайт с другого устройства. Ваш WP-сайт все так же будет загружаться, только теперь Gulp будет следить за изменениями и будет сразу же их применять. Больше не нужно переключаться в браузер и нажимать на кнопку обновить!

Для остановки Gulp нажмите Ctrl/Cmd + C.

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree