Если вы запуганы, измотаны или раздражены Gulp, Grunt, NPM, Yeoman и всеми другими инструментами NodeJS, которые стремятся помочь, но часто делают наоборот, в PHP возможен хороший рабочий процесс управления активами, и этот учебник призван доказать, что Это. В этой статье мы рассмотрим установку управления активами PHP без NodeJS .
Что мы будем делать
Мы добавим управление активами в проект Slim 3. В качестве базового «приложения» мы будем использовать Slim3 Skeleton Роба Аллена, а также:
- BowerPHP вместо Bower для установки активов
- markstory / мини-актив для минификации
- Robo для отслеживания ресурсов (отслеживания изменений) и выполнения перестройки (минификации) при обнаружении изменений
Почему мини-актив, а не Munee или Assetic? Потому что это очень просто — настройте файл .ini , запустите, и он запустится. Никаких изменений на сервере, никакой глубокой настройки, готовых к работе.
Обратите внимание, что Slim 3 используется здесь только в качестве базового приложения и не имеет большого значения для всей картины — мы не будем использовать какую-либо конкретную функциональность Slim. Таким образом, вы можете использовать любой фреймворк или вообще пропустить его. Мы будем использовать Homestead Improved как обычно, чтобы настроить локальную среду разработки.
Начиная
git clone https://github.com/swader/homestead_improved hi_assets cd hi_assets bin/folderfix.sh sed -i '' "s@Project@test@g" Homestead.yaml vagrant up vagrant ssh
Строка sed — это ярлык для редактирования файла Homestead.yaml — он заменит слово Project на test , поэтому наше приложение может быть в папке test а не Project . Это сугубо личное предпочтение. Если что-то из этого сбивает с толку, смотрите это введение в Vagrant .
Как только эти команды будут выполнены, мы сможем получить сообщение об ошибке « No input file specified при посещении homestead.app/ в браузере, при условии, что мы добавили homestead.app в /etc/hosts в операционной системе хоста в соответствии с инструкциями ,
Давайте настроим скелет сейчас.
cd Code composer create-project -n -s dev akrabat/slim3-skeleton test cd test
Достаточно просто. Это должно создать экран, похожий на этот:
Наконец, давайте установим другие предварительные условия. BowerPHP еще не находится в стабильном состоянии, поэтому нам нужно разрешить Composer загружать бета-пакеты. Откройте файл глобальной конфигурации с помощью:
composer global config -e
и добавьте следующее утверждение:
"minimum-stability": "beta"
Теперь мы можем установить бета-пакеты.
composer global require beelab/bowerphp codegyre/robo markstory/mini-asset natxet/CssMin --dev
Обратите внимание, что mini-asset предложит установить некоторые другие пакеты, каждый из которых зависит от контекста, который вам может потребоваться. Пакет CssMin является одним из таких дополнений — без него mini-asset не сможет обрабатывать CSS-файлы. Обратитесь к списку предложений выходных данных процедуры установки для получения дополнительных пакетов фильтров, которые могут вам понадобиться
Теперь у нас есть все предпосылки. Давайте начнем иметь дело с активами.
Управление активами
Голый скелет Slim3 от Роба немного прост — никаких стандартных таблиц стилей или внешних интерфейсов не прикреплено (на мой взгляд, так должно быть в любых рамках). Давайте изменим это.
Начальная загрузка через BowerPHP
Давайте добавим Bootstrap, и только для удовольствия, Bootstrap-social — это позволит нам продемонстрировать объединение различных CSS-файлов, а также позволит нам использовать стили кнопок социальных сетей в нашем интерфейсе.
cd ~Code/test bowerphp install bootstrap bowerphp install bootstrap-social
Папка bower_components должна теперь находиться в test папке, содержащей все, что мы просили. Мы могли бы установить компоненты в public app/templates/home.twig) и использовать их непосредственно в нашем коде макета (см. app/templates/home.twig) , но это ужасно неэффективно, хотя отлично app/templates/home.twig) для отладки стилей. Давайте вместо этого создадим необходимый нам CSS отфильтрованным, объединенным и минимизированным способом. Это где mini-asset .
Мини-активы
Согласно документации , mini-asset настраивается через файл .ini . Давайте добавим файл assets.ini в корень нашего проекта:
[css] cachePath = public/css/build paths[] = bower_components/* filters[] = CssMinFilter [app.css] files[] = bootstrap/dist/css/bootstrap.min.css files[] = font-awesome/css/font-awesome.css files[] = bootstrap-social/bootstrap-social.css files[] = public/css/style.css
Согласно документации по начальной загрузке , мы должны включить Bootstrap, FontAwesome и Bootstrap-social в наш HTML. Это именно то, что мы сделали выше, объединив разные библиотеки.
cachePath сообщает mini-asset куда поместить наш скомпилированный CSS. Paths перечисляет все места, в которых можно найти CSS-файлы. Фильтры перечисляют все дополнительные пакеты, используемые для обработки активов. В нашем случае это просто вышеупомянутый пакет CSSMin.
В следующем разделе перечислены скомпилированные файлы CSS, один за другим, и файлы, из которых они состоят.
Если мы теперь запустим mini-asset (и, cachePath сначала cachePath папку cachePath ), мы должны получить скомпилированный файл CSS в качестве вывода.
mkdir public/css/build mini_asset build --config assets.ini
Последний трюк, который нам нужно сделать, это скопировать подпапку fonts font-awesome в public/css , потому что пути в скомпилированном CSS являются относительными, и найдите одну папку, чтобы найти шрифт. Скомпилированный файл, помещенный в build , не будет содержать одну папку со fonts , поэтому нам нужно поместить их туда:
cp -R bower_components/font-awesome/fonts public/css/
Теперь мы можем заменить ссылку стиля в файле home.twig на home.twig :
<link href='/css/build/app.css' rel='stylesheet' type='text/css'>
Мы также можем добавить кнопку социальной начальной загрузки, чтобы убедиться, что она работает.
<a class="btn btn-small btn-social btn-twitter"> <i class="fa fa-twitter"></i> Sign in with Twitter </a>
Robo
На этом этапе достаточно просто перезапускать компиляцию каждый раз, когда вносятся важные изменения в файлы стилей, но почему бы не автоматизировать вещи? Робо здесь, чтобы помочь. Есть и другие наблюдатели , но Робо такой надежный и универсальный исполнитель задач, было бы стыдно не использовать его. На самом деле, в Robo встроена собственная обработка ресурсов , но, учитывая, что многие могут отказаться от использования Robo, этот учебник пошел более расстроенным путем. Не стесняйтесь использовать свой конвейер активов, если он чувствует себя лучше, чем mini-asset , хотя — небо это предел!
Для запуска Robo необходим RoboFile.php в рабочем каталоге. Робо может создать этот файл для нас, если мы просто запустим его в папке, где такого файла нет:
> robo RoboFile.php not found in this dir ? Should I create RoboFile here? (y/n) y RoboFile.php created
Идея состоит в том, чтобы инициировать перестройку файла app.css каждый раз, когда style.css в public/css изменяется — это пользовательская style.css стилей пользователя, и именно там мы будем помещать наши собственные стили для переопределения или использования тех, которые были включены до них. (Bootstrap и т. Д.)
Сначала давайте настроим наблюдателя и посмотрим, срабатывает ли он каждый раз, когда файл изменяется. Это делается путем определения открытого метода в RoboFile который содержит команды наблюдения:
public function build() { $this->taskWatch() ->monitor('public/css/style.css', function () { $this->say("style.css changed!"); })->run(); }
Если мы сейчас запустим наблюдатель и изменим файл CSS, Robo предупредит нас об этом.
> robo build [Watch] Watching public/css/style.css for changes... ➜ style.css changed!
Теперь все, что осталось, — это перестроить mini-asset при изменении. Это делается с помощью команды _exec или taskExec :
public function build() { $this->taskWatch() ->monitor('public/css/style.css', function () { $this->say("Starting CSS rebuild"); $this->_exec('mini_asset build --config assets.ini'); $this->say("CSS rebuilt successfully!"); })->run(); }
И это все, что потребовалось — перезапустив Robo, теперь у нас есть активная функция автоматического пересмотра файлов, которая перекомпилирует CSS-файлы при каждом изменении.
> robo build [Watch] Watching public/css/style.css for changes... ➜ Starting CSS rebuild [Exec] Running mini_asset build --config assets.ini .Complete [Exec] Done in 0.556s ➜ CSS rebuilt successfully! ➜ Starting CSS rebuild [Exec] Running mini_asset build --config assets.ini .Complete [Exec] Done in 0.558s ➜ CSS rebuilt successfully!
Вывод
В этом руководстве мы рассмотрели начало работы с управлением активами (установкой, объединением и минификацией) в проектах PHP. Мы увидели, что NodeJS не нужен для этого аспекта разработки и не стоит дополнительных хлопот.
Мы использовали BowerPHP в качестве замены Bower, мини-активов для объединения и минимизации, а Robo — для отслеживания изменений и запуска задачи минификации. Обладая этими знаниями, вы теперь сможете составлять более сложные ресурсы, включая LESS to CSS, JavaScript и многое другое.
Вы используете другой подход? Дайте нам знать об этом в комментариях!