Блог 25/11/2018

Готовый Gulp-проект для WordPress – быстрый старт

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

Готовый Gulp-проект для WordPress – быстрый старт

Возможности и что входит в мой gulpfile.js

Возможность выбрать в gulpfile.js 3 или 4 версию Gulp, просто укажите нужную версию.

Выбрать версию Gulp в gulpfile.js

Возможность в gulpfile.js выбрать синтакcис Sass или Scss в gulpfile.js.

Выбрать синтакcис Sass или Scss в gulpfile.js

Используемые мною таски для WordPress:

browser-sync – даёт технически возможность автообновлять открытые в браузере страницы разрабатываемого сайта, работает в связке с таском «watch».

Этим он не ограничивается, смотрите мой gulpfile.js, и всё поймете.

sass – очень многие профессионалы используют данный метаязык в своих проектах, в моём gulpfile.js настроен отдельный таск, который все файлы SASS в шаблоне (теме) сайта собирает и сжимает в единый CSS файл. Ну, а далее, как обычно, подключаем его в functions.php в теме сайта. Это лучше, чем подключать кучу CSS файлов.

js – так же собирает в кучу все JS файлы в шаблоне (теме) и сжимает их, как и в случае с SASS в functions.php в итоге подключается всего один конечный JS файл, и это прекрасно!

watch – таск, который в данном случае работает в связке с вышеописанными тасками: browser-sync, sass и js. Следит за изменениями в файлах шаблона (темы) с определёнными расширениями и автообновляет страницу сайта в браузере, выводя изменения на экран монитора.

imgmin-theme – настроенный таск, позволяющий сжимать все изображения до оптимального качества и размера в определённой папке шаблоне (теме). Выполняется командой gulp imgmin-theme.

imgmin-uploads – настроенный таск, сжимающий все изображения до оптимального качества и размера в папке «uploads». Выполняется командой gulp imgmin-uploads.

deploy-site – настроенный таск для ISPmanager5 (можно настроить под любую панель), который отгружает полностью сайт в интернет на ваш сервер по протоколу FTP. Выполняется командой gulp deploy-site.

deploy-theme – настроенный таск для ISPmanager5 (можно настроить под любую панель), отгружающий только шаблон (тему) в интернет на ваш сервер по протоколу FTP. Выполняется командой gulp deploy-theme.

rsync – базовый таск для ISPmanager5, отгружает ваш сайт на сервер в интернет по защищённому сетевому протоколу SSH. Выполняется командой gulp rsync.


Конечно же, возможности использования Gulp для WordPress ограничиваются вашими потребностями, опытом и ленью.

Зависимости

Для работы требуется:

- установленный Gulp;

- любой настроенный виртуальный сервер, например, Open Server;

- сам WordPress с запущенным виртуальным сервером;

- Win10 с включённым bash.

Использование

1) Скачиваем и распаковываем файлы с GitHub в папку проекта на локальном сервере, например: C:\OpenServer\domains\myproject.loc. и настраиваем его, указав в настройках путь до нужной папки: \wp-site.loc\src

Gulp для WordPress – готовый gulpfile.js для быстрого старта Gulp для WordPress – готовый gulpfile.js для быстрого старта

2) Устанавливаем необходимые пакеты Gulp работы и настраиваем таски под себя.

3) В папку «src» устанавливаем wordpress.

4) В корне проекта запускам Gulp и наслаждаемся работой.

Преимущества и недостатки использования Gulp для WordPress

Преимущества – устраняет необходимость использовать кучу дополнительных программ и онлайн-сервисов, например: «Koala» для SASS, «FileZilla Client» – для закачки файлов сайта на хостинг и т.д. Как результат, более комфортная работа.

Недостатки – gulp требует минимальных знаний и опыта, некоторой смелости и иногда настойчивости. Gulp –это профессиональное программное обеспечения, возможности которого не заканчиваются веб-разработкой.


Я рад, что вы дочитали мою статью до конца. Будете использовать Gulp для разработки своих проектов на WordPress? Или всё ещё думы думаете?

Вот ссылка на исходники настроенного моего Gulp-проекта для быстрого старта:

Перейти и скачать исходники

Жду ваших комментариев.

Если эта информация стала для вас полезной, вы можете сказать "спасибо", нажав кнопку вашей любимой социальной сети:

Вконтакте
Одноклассники
Google Plus
Читать еще:
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
Let's Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки
10/02/2019
Хостинг для Landing Page – как выбрать нужный тариф
Хостинг для Landing Page – как выбрать нужный тариф
07/02/2019
Установка WordPress с нуля на хостинг
Установка WordPress с нуля на хостинг
01/02/2019
Как выбрать хостинг для WordPress 5
Как выбрать хостинг для WordPress 5
25/01/2019
Хостинг или VPS – как сделать верный выбор? Советы из личного опыта
Хостинг или VPS – как сделать верный выбор? Советы из личного опыта
20/01/2019

Подпишись и будь в курсе новых публикаций на сайте!