Gulp php: Как отрабатывать PHP в browser-sync (gulp)? — Хабр Q&A

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

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

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

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

Возможность в 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

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

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

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

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

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

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

---

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

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

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

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

По теме:

• Start html template on UIKit3 + SASS + Gulp
• Rsync (gulp-rsync) – настройка deploy сайта на хостинг
• Vinyl-ftp – настройка deploy сайта на хостинг по протоколу FTP через Gulp
• Шаблон LandingPage «House blue v1»
• Бесплатный шаблон сайта на Jekyll «WeblTOP» на Gulp

Читать еще:

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

26/02/2020

Let’s Encrypt – бесплатный SSL-сертификат для сайта: инструкция по получению, установке, перевыпуску, а также преимущества и недостатки

10/02/2019

Хостинг для Landing Page – как выбрать нужный тариф

07/02/2019

Установка WordPress с нуля на хостинг

01/02/2019

Как выбрать хостинг для WordPress 5

25/01/2019

Please enable JavaScript to view the comments powered by Disqus.

структура темы — Code Lab

автор Toni_Dev

WordPress и Gulp: структура темы

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

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

Вот пример структуры папок и файлов для темы WordPress, использующей Gulp:

wp-content/
└── themes/
    └── myTheme/
        ├── gulpfile.js
        ├── package.json
        ├── src/
        │   ├── js/
        │   │   ├── main.js
        │   │   └── vendor/
        │   │       └── jquery.min.js
        │   ├── sass/
        │   │   ├── style.scss
        │   │   └── partials/
        │   │       ├── _variables.  scss
        │   │       └── _mixins.scss
        │   ├── images/
        │   └── fonts/
        ├── dist/
        │   ├── css/
        │   ├── js/
        │   ├── images/
        │   └── fonts/
        ├── style.css
        ├── functions.php
        ├── index.php
        ├── single.php
        ├── page.php
        ├── header.php
        ├── footer.php
        ├── sidebar.php
        ├── comments.php
        ├── searchform.php
        ├── archive.php
        └── 404.php

Давайте рассмотрим подробнее структуру:

• gulpfile.js — это основной конфигурационный файл для Gulp. Он содержит задачи, которые автоматизируют такие задачи, как компиляция Sass, объединение и минимизация файлов JavaScript и оптимизация изображений.
• В файле package.json перечислены зависимости, которые требуются для задач Gulp. Вы можете установить эти зависимости, запустив npm install.
• Каталог src содержит исходные файлы для вашей темы, включая файлы Sass, файлы JavaScript, изображения и шрифты.
• Каталог dist содержит скомпилированные и оптимизированные файлы, которые готовы к использованию в вашей теме WordPress.
• Style.css и functions.php нужны для правильной работы темы сайта.
• Другие файлы темы, такие как index.php, single.php, page.php, header.php, и так далее, являются файлами шаблонов, которые определяют макет и дизайн вашей темы WordPress.

Таким образом, использование Gulp в теме WordPress позволяет вам автоматизировать повторяющиеся задачи и улучшить свой рабочий процесс. Настроив свой gulpfile.js и упакуйте файлы .json, вы можете компилировать файлы Sass, объединять и уменьшать файлы JavaScript, а также оптимизировать изображения. Исходные файлы хранятся в каталоге src, в то время как скомпилированные и оптимизированные файлы хранятся в каталоге dist. Остальные файлы и папки такие же, как в предыдущем примере.

Изучите Gulp, Php и Prisma

Самые популярныеС наивысшим рейтингомНедавно добавленныеСамые популярные

курс

Полное введение в PHP

курс

Марк Шуст

курс 9000 3

Создание серверной части с помощью Prisma в проекте TypeScript Node

курс

Райан Ченки

курс

Создание полнофункционального приложения с помощью Prisma

курс

Сяору Ли

урок

Gulp and Browserify — Добавление Живая перезагрузка с Browsersync

урок

Шейн Осборн

урок

Gulp and Browserify — Добавление карт Babel и Source

урок

Шейн Осборн

урок 900 03

Gulp and Browserify — начальная настройка

урок

Шейн Осборн

урок

Установка и запись задачи по умолчанию с помощью Gulp

урок

Джейкоб Картер

урок

Gulp и Browserify — Подключение Watchify

урок

Шейн Осборн

урок

Объединение файлов JavaScript с помощью Gulp

урок

Джейкоб Картер

урок

Создание бессерверной базы данных Graphql для ваших клиентских приложений с помощью Prisma

, урок

, Кристиан Nwamba

урок

Установка и настройка Prisma для нового проекта

урок

Xiaoru Li

урок

Создание записи в базе данных с помощью Prisma Client

урок

Сяору Ли

урок

Выполнение базовых запросов к базе данных (CRUD) с помощью Prisma Client

урок

Сяору Ли

урок

900 06 Работа с моделями и отношениями с Prisma Schema

урок

от Xiaoru Li

урок

Ограничение количества возвращаемых данных с помощью Prisma Client

урок

Райан Ченки

урок

Использование клиента Prisma для подключения связанных таблиц при создании новых данных

урок

Райан Ченки

урок

Использовать клиент Prisma для запроса связанных данных

урок

Райан Ченки Создание связи между двумя таблицами в схеме Prisma

урок

автор Райан Ченки

урок

Использование Express для динамического создания данных

урок

Райан Ченки

урок

Создание записи в базе данных с помощью Prisma Client

урок

Райан Ченки

урок

Использовать клиент Prima для выбора подмножества данных

Больше не показывать это сообщение

‎31-07-2016 22:56

gulp deploy дай мне локаль не найдена

 

 

После того, как я запустил «gulp setup» из подпапки задачи, он дает мне

 

  [08:49:46] Настройка завершена! Перейдите в каталог «/dev/tools/frontools/config/» и отредактируйте там конфигурацию.  

 

, а затем я пытаюсь использовать gulp deploy и получаю этот журнал ошибок:

 

 PHP Неустранимая ошибка: Uncaught Error: Class 'Locale' не найден в /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/ lib/internal/Magento/Framework/Locale/Bundle/DataBundle.php:64
Трассировки стека:
#0 /Users/refaegold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Locale/Bundle/DataBundle.php(28): Magento\Framework\Locale\Bundle\DataBundle->
 cleanLocale('en_US' )
#1 /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Setup/Lists.php(80): Magento\Framework\Locale\Bundle\DataBundle->get('en_US')
#2 /Пользователи/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Validator/Locale.php(42): Magento\Framework\Setup\Lists->getLocaleList()
#3 /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/app/code/Magento/Developer/Console/Command/SourceThemeDeployCommand. php(144): Magento\Framework\Validator\Locale->isValid('en_US')
#4 /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/vendor/symfony/console/Symfony/Component/Co in /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Locale/ Bundle/DataBundle.php в строке 64
[08:51:27] 'развертывание' завершилось ошибкой через 518 мс
[08:51:27] Ошибка: команда не выполнена: /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/bin/magento dev:source-theme:deploy --type=less --locale=en_US --area=adminhtml --theme=Magento/бэкенд css/стили-старые css/стили
Неустранимая ошибка PHP: Uncaught Error: класс Locale не найден в /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Locale/Bundle/DataBundle.php:64
Трассировки стека:
#0 /Users/refaegold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Locale/Bundle/DataBundle.php(28): Magento\Framework\Locale\Bundle\DataBundle->
 
 cleanLocale('en_US' )
#1 /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Setup/Lists.
  php(80): Magento\Framework\Locale\Bundle\DataBundle->get('en_US')
#2 /Пользователи/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Validator/Locale.php(42): Magento\Framework\Setup\Lists->getLocaleList()
#3 /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/app/code/Magento/Developer/Console/Command/SourceThemeDeployCommand.php(144): Magento\Framework\Validator\Locale->isValid('en_US')
#4 /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/vendor/symfony/console/Symfony/Component/Co in /Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/lib/internal/Magento/Framework/Locale/ Bundle/DataBundle.php в строке 64
в checkExecSyncError (child_process.js:486:13)
в execSync (child_process.js:526:13)
в theme.locale.forEach.locale (/Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/task/deploy.js:19:9)
в Array.forEach (собственный)
на themes.forEach.name (/Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/task/deploy.  js:14:20)
в Array.forEach (собственный)
в Object.module.exports (/Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/task/deploy.js:10:10)
в module.exports(/Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/node_modules/orchestrator/lib/runTask.js:34:7)
в Gulp.Orchestrator._runTask (/Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/node_modules/orchestrator/index.js:273:3)
в Gulp.Orchestrator._runStep (/Users/refaelgold/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/node_modules/orchestrator/index.js:214:10)
refaelgold на refaels-iMac в ~/PhpstormProjects/vagrant-magento/magento2ce/dev/tools/frontools/task on development*
$ 

 

 я использую Magento вер. 2.2.0-dev , так что, возможно, это проблема или что-то еще.

Ожидание ответа Все темы форума

Предыдущая тема

Следующая тема

2 ПРИНЯТЫЕ РЕШЕНИЯ

‎01. 08.2016 15:16

Re: gulp deploy дайте мне локаль не найдена

Эй, это файл json 

https://gist.github.com/refaelgold/7b14768fdd4fb6f61d5185a8d49ea6d3

я меняю снежный пёс на золотой в Registration.php и theme.xml для переименования времени

900 02  

у меня еще есть эта ошибка после того, как я сделал все, что вы сказали

, я должен сказать — это новая установка magento стабильной версии 2.1

 

 

 Неустранимая ошибка PHP: необработанная ошибка: класс «Язык» не найден в /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/lib/internal/Magento/Framework/Locale/Bundle/DataBundle .php:64
Трассировки стека:
#0 /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/lib/internal/Magento/Framework/Locale/Bundle/DataBundle.php(28): Magento\Framework\Locale\Bundle\DataBundle-> cleanLocale ('en_US')
#1 /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/lib/internal/Magento/Framework/Setup/Lists. php(80): Magento\Framework\Locale\Bundle\DataBundle->get(' en_US')
#2 /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/lib/internal/Magento/Framework/Validator/Locale.php(42): Magento\Framework\Setup\Lists->getLocaleList()
#3 /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/app/code/Magento/Developer/Console/Command/SourceThemeDeployCommand.php(144): Magento\Framework\Validator\Locale->isValid(' en_US')
#4 /Users/refaelgold/Phpstor в /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/lib/internal/Magento/Framework/Locale/Bundle/DataBundle.php в строке 64
 в checkExecSyncError (child_process.js:465:13)
 в execSync (child_process.js:505:13)
 в /Users/refaegold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/vendor/snowdog/frontools/task/deploy.js:19:9
 в Array.forEach (собственный)
 в /Users/refaelgold/PhpstormProjects/magento2-vagrant-for-developers/magento2ce/vendor/snowdog/frontools/task/deploy.