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-проекта для быстрого старта:

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

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

По теме:

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

Эта статья Gulp является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

Простая разработка тем WordPress частично ответственна за ее успех. Разработчик, обладающий интерфейсом и знанием PHP, может обратиться к превосходному Кодексу и начать работу над своим следующим шедевром.

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

копирование новых файлов тем PHP
оптимизация изображений
компиляция файлов Sass SCSS в один минимизированный файл CSS
объединение упорядоченных файлов JavaScript, удаление операторов отладки и минимизация
автоматическое обновление браузера при обновлении файлов.

Что такое Gulp?

Gulp — это система сборки на основе JavaScript, которая берет ваши исходные файлы и преобразует их в оптимизированные версии. Если вы новичок в Gulp, пожалуйста, обратитесь к разделу Введение в Gulp.js для полной инструкции по установке и использованию. Краткое описание начальных шагов:

Установите Node.js.
Установите Gulp глобально: npm install gulp-cli -g
Создайте папку проекта и перейдите в нее: mkdir mytheme затем cd mytheme .
Инициализируйте ваш проект с помощью npm: npm init

Файлы вашего проекта

Процесс сборки Gulp (или любой другой) требует набора исходных файлов, содержащих ваш неизмененный код и изображения. Они обрабатываются, обрабатываются и минимизируются для создания файлов сборки .

WordPress устанавливается в папку веб-сервера, возможно, /var/www/ в Linux / Apache. Ваша тема WordPress должна быть определена в ее собственной подпапке в /wp-content/themes/ . Поэтому папка с нашими встроенными файлами может быть /var/www/wp-content/themes/mytheme/ . Как минимум, темы требуют двух файлов:

таблицу стилей style.css содержащую метаданные в комментариях вверху, и
файл шаблона index.php .

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

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

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

Папка исходного проекта требует еще четыре подпапки:

template — файлы темы WordPress PHP
images — изображения, используемые вашей темой
scss — исходные файлы Sass SCSS
js — любое количество отдельных исходных файлов JavaScript на стороне клиента.

Установить зависимости

В исходной папке ( ~/mytheme/ ) выполните следующую команду npm чтобы установить Gulp и все подключаемые модули в качестве зависимостей разработки:

 npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets

Будет node_modules папка node_modules содержащая код модуля. Это должно быть опущено в вашей системе управления версиями (для пользователей Git добавьте node_modules в ваш файл .gitignore ).

Создать файл конфигурации Gulp

Создайте новый gulpfile.js конфигурации gulpfile.js в корне вашей исходной папки. Добавьте этот код, чтобы начать:

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

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

 gulp php

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

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

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

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

`Sass Compilation`

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

Запустите эту новую задачу с gulp css чтобы:

сначала запустите задачу Gulp images (изображения могут потребоваться в вашем CSS)
скомпилируйте код Sass в исходном scss/style.scss используя быстрый компилятор LibSass
Используйте PostCSS для автоматического добавления ссылок на ресурсы, применения префиксов поставщиков, объединения медиазапросов и минимизации получающегося кода CSS
выведите таблицу стилей в /var/www/wp-content/themes/mytheme/style.css .
принудительная перезагрузка браузера Browsersync (подробнее об этом позже).

Исходный scss/style.scss должен содержать метаданные темы WordPress вверху, например

 '_base' ; @ import '_forms' ; @ import '_tables' ; @ import 'components/_widget1' ;

Важно использовать /*! как первая строка. Это гарантирует, что cssnano minifier не удалит комментарий и сделает вашу тему непригодной для использования.

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

 .widget1 { width : width( 'myimage.jpg' ); height : height( 'myimage.jpg' ); background-image : resolve( 'myimage.jpg' ); }

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

 .widget2 { background-image : inline( 'myimage.jpg' ); }

`Обработка JavaScript`

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

Запустите эту новую задачу с gulp js чтобы:

обработать все файлы JavaScript в исходной папке js
упорядочить файлы соответствующим образом. Добавьте комментарии вверху ваших файлов JavaScript для объявления зависимостей, например, // requires: lib1.js или // requires: config.js lib1.js
объединить в один файл
убрать все операторы отладки и ведения журнала консоли
минимизировать код
выведите полученный код в /var/www/wp-content/themes/mytheme/js/scripts.js .
принудительная перезагрузка браузера Browsersync (подробнее об этом позже).

`Запустить все`

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

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

`Включить просмотр файлов и Browsersync`

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

Позвольте Gulp наблюдать за изменениями файлов перед запуском соответствующей задачи.
Автоматическая перезагрузка файлов CSS и JavaScript при их изменении (без обновления страницы).
Автоматическое обновление страницы при изменении файла шаблона.

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

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

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

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

 [BS] Proxying: http://localhost [BS] Access URLs: ------------------------------------- Local: http://localhost:3000 External: http://192.168.1.99:3000 ------------------------------------- UI: http://localhost:8001 UI External: http://192.168.1.99:8001 ------------------------------------- [BS] Watching files...

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

Нажмите Ctrl / Cmd + C, когда хотите остановить обработку Gulp.

`Улучшать дальше`

Мы рассмотрели основы разработки тем WordPress с помощью Gulp, но есть несколько тысяч плагинов, которые помогут вам в вашем рабочем процессе. Вы можете рассмотреть дополнительные задачи для:

Несколько часов написания задач Gulp могут сэкономить много дней ручной обработки в течение длительного времени.

`Стек используемых технологий / Студия 15`

`Основной стек технологий`

LAMP/LEMP/FAMP/FEMP.
HTML, CSS, JavaScript, TypeScript.
PHP 7, MySQL.
Symfony, Laravel, Zend Framework, Yii, Kohana.
LESS, SASS, PostCSS.
Gulp, Webpack, Babel.
БЭМ.
React (Next.js), Vue (Nuxt.js), Angular.
Git, Mercurial.
Jenkins, Gitlab.

Стек не полный, поэтому если вам необходима другая технология, фреймворк или CMS — обращайтесь.

`Используемые технологии и подходы`

`Бэкенд`

Руководствуемся различными принципами разработки (KISS, DRY, SOLID, GRASP и другие базводры).
Языки PHP и Go (для высоконагруженных проектов) с применением паттернов проектирования.
Symfony, Laravel, Zend Framework для разработки и развития новых проектов.
Yii и Kohana для развития готовых сторонних и собственных проектов.
В качестве реляционной базы данных используем MySQL:применяется нормализация, денормализация данных в зависимости от требований; репликации; применение индексов; транзакции с указанием уровня изоляции, блокировки; построение сложных запросов.
В качестве документарной базы данных используем MongoDB. Применяется в узкоспециализированных случаях, например для хранения «потока данных».
Системы контроля версий:Основной инструмент — Git с моделью ветвления master, stable, develop, task. GitLab, GitHub, Bitbucket.
Организация релевантного морфологического поиска:Sphinx, Elasticsearch. «Родная» поддержка полнотекстового поиска для MySQL, с частичным использованием алгоритма «Стеммер Портера». Zend Search Lucene — для реализации полнотекстового поиска средствами PHP.
Другие технологии:менеджер пакетов и зависимостей Composer; для тестов используется PHPUnit, Codeception; CI Server — Jenkins, Gitlab; анализаторы кода phpcpd, phpmd, а также phploc для фиксирования метрик; применяется проверка стандартов написания кода с помощью phpcs; Redis, Beanstalk — кеширование и сервер очередей; Docker — разработка, развертывание на серверах.

`Фронтенд`

Разрабатываем SPA и SSR приложения, используя библиотеки React (Next.js), Vue (Nuxt.js), Angular. Взаимодействуем с сервером через классический REST API или GrahpQL.
Верстаем макеты с использованием технологий HTML, CSS, JS, TS:принципы БЭМ и разделение интерфейса на компоненты; css анимации и js интерактив; адаптивность; кроссбраузерность; семантика и валидность html разметки; доступность для людей с ограниченными возможностями; использование микро-разметки opengraph и schema.org; ui kits для быстрой разработки прототипов.
Настраиваем сборку frontend:автоматизация задач с Gulp; использование пре/пост-процессоров LESS, SASS, PostCSS; настройка гибкого, модульного JavaScript с Webpack, с возможностью писать на современном ES с помощью Babel; автоматическая оптимизация графики с построением системы иконок на PNG спрайтах или SVG; автоматическая проверка стиля кода инструментами Stylelint и ESLint.
Оптимизируем производительность проектов:сокращение количества запросов к серверу, путем правильной сборки зависимостей; постепенная загрузка не критичных компонентов страницы; управление отображением содержимого в процессе загрузки страницы; правильное использование различных форматов графики и ее оптимизация.

Стандартизируем процессы frontend разработки:написание методологий разработки; разработка библиотеки используемых компонентов; разработка стайлгайда для проекта.

`Дизайн`

Узкоспециализированные специалисты: графический дизайн, иллюстрация, видео, моушн-дизайн, анимация, иконографика, типографика, 3D.
Документация дизайна.
Системы масштабирования проектов, руководство правил по использованию UI элементов.

`Проектирование и коммуникации`

Интервьюирование клиента, при необходимости погружение на стороне клиента.
Построение схем бизнес-процессов BPMN, EPC, IDEF0.
Концептуальное видение проекта.
Анализ конкурентного поля и другая аналитика.
Информационная архитектура проекта.
Адаптивные интерактивные прототипы.

`Коммуникации внутри команды`

Redmine и Slack, их тесная интеграция, кастомизированная под наши нужды.
Сервисы Google.

`глоток-подключение-PHP — нпм`

ТРЕБУЕТСЯ УЗЕЛ 4 ИЛИ БОЛЬШЕ

Запустить PHP-сервер

Это в значительной степени gulp версия grunt-php @ sindresorhus и действует как замена gulp-connect базовой версии , хотя обратите внимание, что не все функции gulp-connect поддерживаются gulp-connect-php. Я открыт для поддержки других функций и запросов на включение, которые их реализуют.

Использует встроенный сервер в PHP 5.4.0+.

`Установить`

  $ npm install --save-dev gulp-connect-php

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

`как синглтон`

  var gulp = require ('gulp'), 
  connect = require ('gulp-connect-php'); 
  
  gulp.task ('connect', function () {
  connect.server (); 
 }); 
  
  gulp.task ('default', ['connect']);

`Как экземпляр`

  var gulp = require ('gulp'), 
  connect = require ('gulp-connect-php'); 
  
  let server = new connect (); 
  
  гл.задача ('подключиться', функция () {
  server.server (); 
 }); 
  gulp.task ('отключить', функция () {
  server.closeServer (); 
 }); 
  
  gulp.task ('по умолчанию', ['подключиться', 'отключить']);

`Примеры`

`Использование с синхронизацией браузера`

  var gulp = require ('gulp'), 
  connect = require ('gulp-connect-php'), 
  browserSync = require ('browser-sync'); 
  
  гл.task ('connect-sync', function () {
  connect.server ({}, function () {
  browserSync ({
  прокси: '127.0.0.1:8000' 
 }); 
 }) ; 
  
  gulp.watch ('** / *. Php'). On ('изменить', функция () {
  browserSync.reload (); 
 }); 
 });

`Расширенное управление параметрами`

  gulp.task ('connect', function () {
  connect.server ({
  configCallback: function _configCallback (type, collection) {
  
  if (type === connect.OPTIONS_SPAWN_OBJ) {
  
  
  collection.env = Object.assign ({
  MY_CUSTOM_ENV_VAR: "env_var_value" 
 }, process.env); 
  
  возврат инкассо; 
 } else if (type === connect.OPTIONS_PHP_CLI_ARR) {
  let newArgs = [
  '-e', 
  '-d', 'memory_limit = 2G' 
 ]; 
  
  
  вернуть newArgs.concat (коллекция); 
 } 
 } 
 }, функция _connected_callback () {
  console.log («Сервер разработки PHP подключен»); 
 }); 
 }); 
  
  gulp.task ('отключить', функция () {
  connect.closeServer (); 
 }); 
  
  gulp.task ('по умолчанию', ['подключиться', 'отключить']);

`Windows (через командный файл)`

Выполнение пакетного файла Windows через указанный пакетный файл % PATH% возможно, но при этом необходимо учесть некоторые особенности.

Пакетный файл должен находиться на вашем % PATH% и быть исполняемым с разрешениями вызывающей стороны.
Вы должны передать набор параметров процессу PHP.
На данный момент у нас нет реального способа обнаружить состояние ошибки.
Вы должны использовать схему «Advanced Option Maniulation» и установить опцию shell для spawn (...) .

`Сценарий`

PHP расположен по адресу C: \ Users \ mainuser \ Applications \ PHP \ 7.0,17-НТС-VC14 \ php.exe .
Пакетный файл находится по адресу C: \ Users \ mainuser \ MyProject \ strap \ php.bat .
Я установил % PATH% вручную на C: \ Users \ mainuser \ MyProject \ strap \;% PATH% .

`Содержание php.bat`

  @echo off 
  
  REM Мы указываем полный путь к PHP, поскольку рабочий каталог - это каталог gulp ... 
  REM, если мы также не изменили его в нашем обратном вызове gulp. 
  
  C: \ Users \ mainuser \ Applications \ PHP \ 7.0,17-НТС-VC14 \ php.exe% *

`Содержимое нашей задачи gulp`

  gulp.task ('connect', function _gulp_connect_task () {
  connect.server ({
  configCallback: function _configCallback (type, collection) {
  if (type === connect.OPTIONS_SPAWN_OBJ) {
  
 
  collection.shell = true; 
  return collection; 
 } 
 } 
 }, функция _connected_callback () {
  console.log ("Сервер разработки PHP подключен."); 
 }); 
 }); 
  
  gulp.task ('default', ['connect']);

`Опции`

`порт`

Тип: номер По умолчанию: 8000

Порт, через который вы хотите получить доступ к веб-серверу. Задача завершится неудачно, если порт уже используется.

`имя хоста`

Тип: строка По умолчанию: '127.0.0.1' (обычно такой же, как localhost )

Имя хоста, которое будет использовать веб-сервер.

Используйте 0.0.0.0 , если хотите, чтобы он был доступен извне.

`база`

Тип: строка По умолчанию: '.'

Из какой папки будет обслуживаться веб-сервер. По умолчанию это каталог gulpfile.

`открыто`

Тип: boolean По умолчанию: false

Откройте сервер в браузере при запуске задачи.

`маршрутизатор`

Тип: строка

При необходимости укажите путь к сценарию маршрутизатора, который запускается в начале каждого HTTP-запроса.Если этот сценарий возвращает false , то запрошенный ресурс возвращается как есть. В противном случае результат выполнения сценария возвращается в браузер.

Пример сценария маршрутизатора:

   
 if (preg_match ('/ \. (?: png | jpg | jpeg | gif) $ /', $ _SERVER ["REQUEST_URI"])) {
  return false; 
 } else {
  echo "
 Спасибо за использование gulp-connect-php :) 
"; 
 } 
 ?>

`бин`

Тип: строка По умолчанию: 'php'

Путь к двоичному файлу PHP.Полезно, если у вас установлено несколько версий PHP.

`ini`

Тип: строка По умолчанию: встроенный php.ini

Путь к настраиваемому файлу конфигурации php.ini .

`stdio`

Тип: строка По умолчанию: 'наследовать'

Для параметра stdio узла

установите значение 'ignore' , чтобы запретить вход в консоль процесса сервера php.

`конфигурация Обратный вызов`

Тип: функция (тип, коллекция): коллекция

Прототип:

тип — строка, либо OPTIONS_SPAWN_OBJ , либо OPTIONS_PHP_CLI_ARR .
Коллекция — Массив или объект, начальная версия коллекции, заданная типом .
Возврат: Опционально модифицированная версия коллекции .

По умолчанию: 'null' (заменяется неоперативным вызовом, который возвращает неизмененную версию параметра коллекции )

Позволяет вызывающей стороне изменять объект параметров spawn и / или аргументы (массив) командной строки PHP перед вызовом сервера разработки PHP.

`отладка`

Тип: логический По умолчанию: 'false'

Включает отладку вызова порождения и его параметров.

`дом`

Этот пакет поставляется с командой сценария запуска NPM под названием prepack . Это предназначено для запуска перед упаковкой и отправкой в NPM, однако это также то, что создает сценарий совместимости Node 4.X index-compat.js . Без него пакет по умолчанию package.json не будет работать должным образом.

`Лицензия`

Массачусетский технологический институт © Micah Blu

`Вполне нормально использовать gulp с PHP | от Sergeon`

Хорошо, это очень простая тема, но некоторые люди даже не знают, что Gulp, даже если он работает поверх Node, можно использовать с любым другим языком программирования. Это также верно для Grunt или любого другого средства выполнения задач javaScript. Некоторые люди считают, что, поскольку Gulp - это javaScript, вы должны использовать Node.js в качестве внутреннего языка, чтобы использовать его, или что, даже если вы можете использовать Gulp с PHP или python, использовать Gulp с Node в качестве задней части. -end более естественный и правильный.

Что ж, дело в том, что даже если gulp запускает node, объединение и минимизация некоторых файлов css и фактическое обслуживание веб-сайта - это две действительно разные задачи, а использование Node -through gulp- для выполнения первого не означает Это не значит, что вы должны или должны использовать Node и для последнего.

С Gulp можно делать множество вещей; наиболее распространенными являются такие задачи, как компиляция, объединение и минимизация ресурсов scss и javaScript, компиляция TypeScript или CofeeScript, компиляция страниц механизмов шаблонов, таких как Jade, или автоматическое выполнение тестов или выполнение сценариев, когда выполняется какое-либо условие, например, повторная сборка вашего приложение при изменении файлов или зеркальных папок с удаленного сервера через scp.Однако почти все типичные операции gulp для обычного рабочего процесса веб-разработки связаны с файловой системой. Они вообще не вмешиваются в ваш веб-сервер.

Если у вас есть сервер PHP, вы можете выполнять сценарии PHP для выполнения тех же действий, что и с Gulp, в основном через пакеты Composer, такие как scssphp для SCSS. Однако эти действия не имеют ничего общего с использованием PHP в качестве веб-сервера. Так же, как использование gulp не заставляет вас использовать Node в качестве бэкэнда, веб-сервер PHP не имеет особого взаимодействия с инструментами PHP для выполнения таких действий файловой системы, как минимизация, объединение или урезание скриптов.

Итак, если вы читаете это, вы, вероятно, являетесь разработчиком PHP, который хочет начать использовать Gulp для таких вещей, как минимизация вашего css или объединение всех ваших javaScripts в один файл, но не знаете точно, как это сделать. взаимодействует с PHP.

Хитрость в том, что для большинства базовых сценариев использования gulp вам вообще не нужна среда gulp для взаимодействия с PHP. Вы просто генерируете некоторые файлы .css из less или, возможно, объединяете и уменьшаете свои javascripts из локального запуска gulp на вашем локальном компьютере , а затем вызываете сгенерированный.css или .js файлы из ваших представлений php, как вы делаете со своими обычными текущими файлами .css или .js. Нет необходимости вмешиваться в рабочий процесс PHP или что-либо, работающее на сервере, где это локальный или удаленный сервер. Gulp просто генерирует несколько файлов, как вы, просто записав новый файл .js в локальном текстовом редакторе или IDE.

`Глоток | PhpStorm`

PhpStorm интегрируется с Gulp.js Task Runner. PhpStorm анализирует файлы Gulpfile.js, распознавая определения задач, показывает задачи в виде дерева, позволяет вам перемещаться между задачей в дереве и ее определением в Gulpfile.js и поддерживает выполнение и отладку задач.

Задачи Gulp.js можно запускать из дерева задач в специальном окне инструментов Gulp или из файла Gulpfile.js, запустив конфигурацию запуска Gulp.js, или как задачу перед запуском из другой конфигурации запуска. PhpStorm показывает результат выполнения задачи в окне инструмента «Выполнить». Окно инструмента показывает вывод Grunt, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. Д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.

`Перед началом работы`

Загрузите и установите Node.js.

`Установка Gulp.js`

Чтобы использовать Gulp в проекте PhpStorm, вам понадобятся два пакета:

Глобально установленный пакет gulp-cli (интерфейс командной строки Gulp) для выполнения команд Gulp.
Пакет gulp, установленный в качестве зависимости разработки для построения дерева задач проекта и предоставления помощи при кодировании при редактировании файла Gulpfile.js. Узнайте больше о Gulpfile.js с официального сайта Gulp.js.

`Для глобальной установки gulp-cli`

Во встроенном терминале ( Alt + F12 ) введите:
npm install -global gulp-cli

`Для установки Gulp.js project`

Во встроенном терминале ( Alt + F12 ) введите:
npm install gulp --save-dev

Вы также можете установить пакеты на Node.js и NPM, как описано в npm, pnpm и Yarn.

`Запуск задач Gulp.js из дерева задач`

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

Gulp.js начинает построение дерева задач, как только вы вызываете Gulp.js, выбирая «Показать задачи Gulp» в контекстном меню Gulpfile.js в окне инструмента «Проект» или в Gulpfile.js открыт в редакторе. Дерево построено в соответствии с файлом Gulpfile.js, для которого был вызван Gulp.js. Если в вашем проекте несколько файлов Gulpfile.js, вы можете построить отдельное дерево задач для каждого из них и запускать задачи, не отказываясь от ранее построенных деревьев задач. Каждое дерево отображается под отдельным узлом.

Технически PhpStorm вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Делается это бесшумно и не требует никаких шагов с вашей стороны.

`Чтобы открыть окно инструмента Gulp`

Когда вы впервые строите дерево задач во время текущего сеанса PhpStorm, окно инструмента Gulp еще не открывается.

По умолчанию PhpStorm не распознает ES6 в Gulpfile.js и не может построить дерево задач. Чтобы решить эту проблему, обновите конфигурацию запуска Gulp.js по умолчанию.

`Чтобы построить дерево задач из ES6 Gulpfile.js`

В главном меню выберите.
В узле «Шаблоны» щелкните Gulp.js.
В открывшемся диалоговом окне «Конфигурация запуска / отладки: Gulp.js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

`Чтобы построить дерево задач из окна инструмента Gulp`

В окне инструмента Gulp щелкните на панели инструментов и выберите нужный файл Gulpfile.js из списка. По умолчанию PhpStorm показывает файл Gulpfile.js в корне вашего проекта.
Если у вас есть другой файл Gulpfile.js, нажмите Выбрать Gulpfile.js и выберите нужный файл Gulpfile.js в открывшемся диалоговом окне. PhpStorm добавляет новый узел с путем к выбранному файлу Gulpfile.js в его заголовке и строит дерево задач под новым узлом.

`Для повторного построения дерева`

`Для сортировки задач в дереве по их именам`

Щелкните на панели инструментов, выберите «Сортировать по» в меню, а затем выберите «Имя». По умолчанию дерево показывает задачи в том порядке, в котором они определены в Gulpfile.js (опция Порядок определения).

`Для запуска задачи`

`Для запуска задачи по умолчанию`

`Для запуска нескольких задач`

`Для перехода к определению задачи`

`Запуск задач из Gulpfile.js`

Поместите курсор на определение задачи. задачу, которую нужно запустить, и выберите в контекстном меню команду Выполнить <имя задачи>. PhpStorm создает и запускает временную конфигурацию запуска с именем выбранной задачи.
Чтобы сохранить автоматически созданную временную конфигурацию запуска, поместите курсор на определение задачи, для которой он был создан, и выберите Сохранить <имя задачи> в контекстном меню выбора.

`Запуск и отладка задач в соответствии с конфигурацией запуска`

Помимо использования временных конфигураций запуска, которые PhpStorm создает автоматически, вы можете создавать и запускать свои собственные конфигурации запуска Gulp.js.

`Чтобы создать конфигурацию запуска Gulp.js`

В главном меню выберите.
Щелкните на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Запуск / отладка конфигурации: Gulp.js».
Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в корне текущего проекта.
Укажите интерпретатор Node.js. Это может быть локальный интерпретатор Node.js или Node.js в подсистеме Windows для Linux. При желании укажите переменные среды для Node.js и аргументы для выполнения задач. Используйте формат - <имя_параметра> <значение_параметра> , например: --env development . Узнайте больше на официальном сайте Gulp.

`Для запуска задач`

`Для отладки задач`

Создайте конфигурацию запуска / отладки Gulp.js, как описано выше.
Откройте файл Gulpfile.js в редакторе и при необходимости установите в нем точки останова.
Чтобы начать сеанс отладки, выберите необходимую конфигурацию отладки из списка на главной панели инструментов и щелкните рядом со списком или выберите в главном меню.
В открывшемся окне инструмента отладки проанализируйте выполнение приостановленной задачи, выполните пошаговое выполнение задачи и т. Д., Как описано в разделах «Проверка приостановленной программы» и «Пошаговое выполнение программы».

`Чтобы запустить задачу Gulp как задачу перед запуском`

Откройте диалоговое окно «Запуск / отладка конфигураций», выбрав в главном меню, и выберите нужную конфигурацию из списка или создайте ее заново, щелкнув и выбрав значок соответствующий тип конфигурации запуска.
В открывшемся диалоговом окне щелкните в области «Перед запуском» и выберите из списка «Запустить задачу Gulp».
В открывшемся диалоговом окне задачи Gulp укажите Gulpfile.js, где определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Gulp. Укажите расположение интерпретатора Node.js, передаваемые ему параметры и путь к пакету gulp.

`Автоматический запуск задач Gulp.js`

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

В диалоговом окне «Параметры / настройки» Ctrl + Alt + S щелкните «Задачи при запуске» в разделе «Инструменты».
На открывшейся странице «Задачи при запуске» щелкните на панели инструментов.
Из списка выберите необходимую конфигурацию запуска Gulp.js. Конфигурация добавлена в список.
Если в проекте нет подходящей конфигурации, щелкните и выберите «Редактировать конфигурации». Затем определите конфигурацию с необходимыми настройками в Run / Debug Configuration: Gulp.js открывается страница. При сохранении новой конфигурации она автоматически добавляется в список задач запуска.

Последнее изменение: 20 мая 2021 г.

`Запуск PHP-сервера по запросу с BrowserSync и Grunt / Gulp`

Некоторое время назад я написал небольшую статью о промежуточном программном обеспечении подключения и о том, как запускать с ним PHP. Хотя изначально эта статья была предназначена для ознакомления с концепцией подключения промежуточного программного обеспечения к аудитории Grunt, я получил много отзывов о PHP.Что на самом деле было нарушено дизайном. Итак, если вы ищете настоящий PHP-сервер по требованию в настройках Grunt или Gulp и получаете все возможности livereload, которые вы знаете от своего сервера подключения, продолжайте:

`Запуск реального PHP-сервера #`

Проблема с исходным решением заключалась в том, что он пытался приспособить один сервер (сервер PHP) к другому (подключиться), что вообще невозможно. Однако было возможно выполнять процесс PHP каждый раз, когда файл PHP появляется в нашем потоке подключения.Это будет работать с базовыми , включая s, программные конструкции и параметры $ _GET , однако все серверные вещи не будут. Нам нужен реальный PHP-сервер .

Начиная с PHP 5.4, у вас есть возможность запускать веб-сервер по запросу везде в командной строке, просто набрав php -S и адрес сервера, который вы хотите прослушивать, например php -S localhost: 8000 . Это также не предназначено для замены веб-сервера функциональностью PHP, но вполне подходит для целей разработки.Теперь нам просто нужен способ запустить его в Node.js, а лучше: в одной из наших систем сборки. Хорошо для нас, так как Синдре Сорхус, постоянно кодирующий, предлагает нам Grunt-PHP. Установите его в свой проект с помощью команды npm install --save-dev grunt-php .

Установить довольно просто, если вы знакомы с connect :

  grunt.initConfig ({
 php: {
 test: {
 options: {
 base: 'app', 
 port: 8010, 
 keepalive: true, 
 open: true 
} 
} 
} 
});  хрюк.registerTask ('сервер', ['php'])

Этот фрагмент открывает сервер PHP, работающий на локальном хосте и порту 8010, свойство open вызывает ближайший браузер для открытия, а keepalive сообщает нашему Grunt не останавливаться после выполнения задачи.

То же самое можно сделать и с Gulp. Существует плагин под названием gulp-connect-php , который является наиболее вводящим в заблуждение именем для модуля узла, поскольку вам не обязательно иметь Gulp для этого модуля и он не имеет ничего общего с подключением (так что теперь скажите мне, что Каталог плагинов Grunt запутан!).В любом случае, если вы хотите, чтобы использовал вместе с Gulp, установите его и запустите таким образом:

  var gulp = require ('gulp'), 
 php = require ('gulp-connect-php');  gulp.task ('php', function () {
 php.server ({база: 'приложение', порт: 8010, keepalive: true}); 
});

Это в основном все, что вам нужно, вы можете наслаждаться своим PHP-сервером, начиная с ваших файлов сборки.

`Добавление BrowserSync в качестве замены Livereload #`

Как указано в документации в «Grunt-PHP»: Для промежуточного программного обеспечения не существует способа, как это было в grunt-contrib-connect .Это главным образом потому, что концепция промежуточного программного обеспечения - это и , а не PHP. Но мы по-прежнему хотим использовать LiveReload (получение всех ваших результатов без необходимости обновлять браузер - это реальный ускоритель производительности) и, возможно, некоторые другие промежуточные программы, к которым мы привыкли. Вот где на помощь приходит BrowserSync. BrowserSync, по сути, уже представляет собой соединение + livereload + настраиваемое промежуточное ПО. Но объединены в один пакет без специальной настройки в чистом сценарии Node и с инструментами командной строки для снижения некоторых барьеров.Одна из функций, которая меня больше всего заинтриговала, - это возможность позволить BrowserSync создавать прокси для другого сервера.

Итак, BrowserSync перенаправляет все запросы на какой-либо другой сервер, например, на наш недавно созданный PHP-сервер, и, отвечая на него, он включает все необходимые сценарии для оперативной перезагрузки и тому подобное.

Для Grunt эта установка выглядит так:

  «использовать строгое»;  module.exports = function (grunt) {
 grunt.loadNpmTasks ('grunt-browser-sync'); 
 хрюканье.loadNpmTasks ('grunt-php'); 
 grunt.loadNpmTasks ('grunt-contrib-watch'); 
  grunt.initConfig ({
 смотреть: {
 php: {
 files: ['app / ** / *. Php'] 
} 
}, 
 browserSync: {
 dev: {
 bsFiles: {
 src: 'app / ** / *. php' 
}, параметры 
: {
 прокси: '127.0.0.1:8010', 
 порт: 8080, 
 open: true, 
 watchTask: true 
} 
} 
}, 
 php: {
 dev: {
 options: {
 port: 8010, 
 base: 'app' 
} 
} 
} 
}); 
  хрюк.registerTask ('по умолчанию', ['php', 'browserSync', 'смотреть']); 
};

Взгляните на задачу browserSync: мы сказали ему, какие файлы нужно отслеживать для перезагрузки (свойство bsFiles ) и переадресовывать все вызовы с localhost: 8080 на 127.0.0.1:8010 с атрибутом прокси. Также обратите внимание, что я добавил (вроде как пустую) задачу наблюдения, чтобы убедиться, что наш сервер не закипит после одного запуска, и что я удалил свойства open и keepAlive .Таким образом, он больше подходит для других настроек Grunt.

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

  
 var gulp = require ('gulp'), 
 php = require ('gulp-connect-php'), 
 browserSync = require ('browser-sync');  var reload = browserSync.reload; 
  гл.задача ('php', функция () {
 php.server ({база: 'сборка', порт: 8010, keepalive: true}); 
}); 
 gulp.task ('browser-sync', ['php'], function () {
 browserSync.init ({
 proxy: '127.0.0.1:8010', 
 port: 8080, 
 open: true, 
 notify : false 
}); 
}); 
 gulp.task ('по умолчанию', ['browser-sync'], function () {
 gulp.watch (['build / *. Php'], [reload]); 
});

В настройке такие же изменения, как и в Grunt. Обратите внимание на процесс наблюдения в конце, который в основном говорит нам вызывать функцию reload BrowserSync каждый раз, когда файл PHP изменяется.

Аккуратно!

`Итог #`

Эта установка (особенно с Gulp) работает как шарм и будет включена в качестве моего последнего подарка для генератора Yeoman, который я написал для своей предыдущей компании. BrowserSync - это действительно инструмент, который помогает со всей неуклюжей настройкой подключения, с которой нам приходилось иметь дело в наших старых настройках Grunt / Gulp. И поскольку я полностью сторонник того, что «один инструмент должен делать только одно» и все разделено на небольшие управляемые программные части, я могу сказать, что мне нравится, когда «серверная вещь» выполняется правильно!

Окно инструмента

`Gulp | PhpStorm`

Используйте это окно инструмента для запуска Gulp.js tasks Результат выполнения задачи отображается в окне инструмента «Выполнить». Окно инструмента показывает вывод Gulp.js, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. Д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.

`Перед началом работы`

Загрузите и установите Node.js.
Установите пакет gulp-cli (интерфейс командной строки Gulp) глобально и установите пакет gulp как зависимость для разработки.См. Подробности в разделе «Установка Gulp.js».

`Выполняемые задачи`

Когда вы впервые строите дерево задач во время сеанса PhpStorm, окно инструмента Gulp еще не открывается.
Если вы уже открыли окно инструмента Gulp, вы можете получить к нему доступ с помощью поиска везде. Дважды нажмите Shift , чтобы открыть окно поиска, начните вводить свой запрос, например, Gulp task , и выберите из списка Показать Gulp Tasks.
Или выберите из главного меню.

`Чтобы открыть окно инструмента Gulp`

`Чтобы построить дерево задач из ES6 Gulpfile.js`

В главном меню выберите.
В узле «Шаблоны» щелкните Gulp.js.
В открывшемся диалоговом окне «Конфигурация запуска / отладки: Gulp.js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

`Чтобы построить дерево задач`

В окне инструмента Gulp щелкните на панели инструментов и выберите нужный файл Gulpfile.js из списка. По умолчанию PhpStorm показывает файл Gulpfile.js в корне вашего проекта.
Если у вас есть другой файл Gulpfile.js, щелкните Выбрать Gulpfile.js и выберите нужный файл Gulpfile.js в открывшемся диалоговом окне. PhpStorm добавляет новый узел с путем к выбранному файлу Gulpfile.js в его заголовке и строит дерево задач под новым узлом.

`Для восстановления дерева`

`Для сортировки задач в дереве по их именам`

Щелкните на панели инструментов, выберите «Сортировать по» в меню, а затем выберите «Имя». По умолчанию дерево показывает задачи в том порядке, в котором они определены в Gulpfile.js (опция Порядок определения).

`Для запуска задачи`

`Для запуска задачи по умолчанию`

`Для запуска нескольких задач`

`Для перехода к определению задачи`

Последнее изменение: 27 августа 2021 г.

`Использование Gulp для создания каталога «развертывания» для проекта php`

У проекта PHP, который я рассматриваю, нет процесса «развертывания».Думаю, преимущество интерпретируемых языков. Все это может быть отправлено на рабочий сервер, но это также означает, что на сервере находится множество файлов, которые не должны находиться на сервере. Это не устраивает мой мозг. Поэтому я думаю, что пора создать папку только для файлов развертывания и скопировать в нее необходимые файлы.

Для этого я воспользуюсь Gulp. Почему не Грунт? Что ж, похоже, что переезд был сделан подальше от бедного Гранта, но, может быть, я ошибаюсь. Gulp также должен быть быстрее, так что это всегда хорошо.

NPM должен быть установлен из поста беседки, чтобы установить gulp глобально.

Затем перейдите в папку с вашим проектом. Теперь узлу потребуется файл конфигурации для хранения его зависимостей. Проект будет плавать в файлах json, и придется что-то делать с этим, скоро станет смешно, это будет третий. В любом случае

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

Затем установите gulp как зависимость от разработчика.

  npm установить gulp --save-dev

Затем создайте файл gulpfile.js в корне проекта. Копирование файлов в Gulp очень просто, поскольку две основные задачи API - получение файлов gulp.src и их запись gulp.dest Итак, вы копируете папку приложения в каталог dist, вы можете использовать приведенный ниже код.

  gulp.task ('dist-app', function () {
     вернуть gulp.src ('./ application / ** / *')
         .pipe (gulp.dest ('./ dist / application'));
});

Затем вы можете запустить его с помощью

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

Я думаю, что лучше иметь отдельные копии для разных задач, потому что тогда вы можете запускать их параллельно. Одна проблема заключается в том, что вы, вероятно, захотите очистить каталог dist, но если такие вещи попытаются работать параллельно, вы попадете в мир боли.

Скажем, ваша задача удаления выглядит так

  var del = require ('del');
gulp.task ('clean-dist', function () {
    console.log ('Очистка папки dist');
    возврат del ('dist / ** / *');
});

И у вас было две задачи «копирования»: «dist-app» и «dist-system», которые могут выполняться параллельно, но сначала должна выполняться очистка.Что ж, есть модуль для этой последовательности выполнения и будет выглядеть примерно так, как показано ниже

  var runSequence = require ('run-sequence');
gulp.task ('make-dist', function (callback) {
    runSequence ('чистое расстояние',
        ['dist-app', 'dist-system'],
        Перезвоните);
});

Таким образом, каждая задача выполняется последовательно, а массив - параллельно.

Это базовая очистка и копирование, позволяющая извлекать только те папки, которые необходимы для вашего производственного развертывания. Т.е. не из.git stuff, * .json и т. д. Но не совсем использую то, что может сделать gulp.

Но это хорошая отправная точка.

`Использование Gulp.js для проверки качества вашего кода`

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

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

Предыдущие утверждения цитируются с домашней страницы Gulp.js. Gulp.js - это точно так же, как Grunt.js, средство выполнения задач, построенное на Node.js, также известное как io.js. Если вы определяете свои задачи в Grunt.js в стиле на основе конфигурации, вы будете определять свои задачи в Gulp.js больше в стиле кода. Для обоих исполнителей задач доступно множество плагинов.

Так в чем же реальная сила Gulp.js?

На мой взгляд, именно использование потоков Node.js делает Gulp.js очень быстрым и эффективным с точки зрения памяти средством выполнения задач. Разницу между Gulp.js и Grunt.js особенно можно заметить при работе над более крупными проектами с огромным количеством файлов.

Во многих случаях разработчики ограничивают использование обоих исполнителей задач только своими проектами javascript.Как я показал вам в прошлый раз, Grunt.js также можно использовать для автоматизации некоторых ваших задач .Net / c #, которые я хочу показать вам сегодня, вы также можете использовать его в проектах php. Итак, вот мой призыв к действию. Перестаньте ограничивать себя и попробуйте применить это в любом проекте, над которым вы работаете, независимо от языка!

В одном из моих предыдущих постов в блоге я показал вам, как использовать Grunt.js для автоматизации некоторых задач разработки. Сегодня мы взглянем на Gulp.js, так что приступим. Минимальные требования для установки Gulp.js должен иметь установленный пакет node и иметь файл gulpfile.js в корне папки вашего проекта.

Подобно Grunt.js , Gulp.js также имеет множество доступных плагинов. Давайте увеличим масштаб некоторых плагинов, которые вы можете применить на php.

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

`Php lint`

В свой gulpfile.js вы можете добавить следующие строки кода, чтобы использовать его.Как видите, вы можете использовать шаблон подстановки для сопоставления файлов, для которых вы хотите запустить phplint, а также игнорировать включение папок.

Вышеупомянутая задача выполняет весь phplint для всех файлов, соответствующих вашему шаблону подстановки.

`Php Unit`

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

На основе настроек, определенных в вашем файле phpunit.xml, вы запустите phpunit с этими настройками.

`Php CS`

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

Как видите, phpcs также поставляется с инструментом phpcbf , который можно использовать для автоматического исправления многих из этих phpcs проблем. К сожалению, для этого инструмента нет подключаемого модуля Gulp.js, но мы можем использовать подключаемый модуль gulp-shell для выполнения phpcbf . Как видите, мы используем стандарт PSR2 для обоих инструментов.

`Php Doc`

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

Аналогичная история и с phpdoc. У нас есть плагин gulp-shell, который выполняет phpdoc в корневой папке нашего проекта, и мы исключаем поставщика, node_modules и server.php из включения в документацию.

`Php MD`

В свой файл gulpfile.js вы можете добавить следующие строки кода для его использования.

Также для PhpMD нет плагина Gulp.js, но не беспокойтесь, здесь мы просто используем плагин gulp-shell. Мы настроили phpmd для проверки размера кода, неиспользуемого кода, наименования, дизайна, чистого кода и некоторых спорных проверок.

`Php зависит`

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

Для pdepend мы также используем плагин оболочки. Как видите, мы определяем несколько элементов в массиве. Итак, первая команда, которую мы выполняем, - это создать папку для хранения вывода pdepend . Вторая команда выполняет pdepend и записывает summary.xml, chart.svg и pyramid.svg в папку docs / pdepend .

`Gulp.js Смотреть`

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

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

Вышеупомянутая задача показывает небольшое сообщение в консоли о том, что что-то изменилось и что настроенные задачи будут выполнены.Мы также определили задачи по умолчанию, которые сначала запускают все наши «качественные» задачи, а затем запускают задачу наблюдения. Теперь каждый раз, когда вы изменяете файл php, задачи phplint , phpcs и phpunit будут выполняться и немедленно сообщать вам о внесенных вами изменениях.

То, что я показал вам в этом блоге, - это только начало того, чего вы можете достичь с помощью этого. Вы также можете использовать git-хуки, чтобы некоторые из этих задач выполнялись до push.

Category Разное