Munee — это инструмент управления активами, который может компилировать LESS, SCSS или CoffeeScript, манипулировать изображениями, минимизировать CSS и JS, а также кэшировать ресурсы на сервере и клиенте на лету. Работает с PHP 5.3 и более новыми версиями.
В этом уроке мы узнаем, как Munee позволяет легко включать ресурсы в шаблоны, как его устанавливать, как он работает и как его использовать.
Munee — это еще один способ избежать NodeJS в управлении активами приложений PHP.
Почему вы хотите использовать Munee?
Munee стремится сделать управление активами проще. Он выполняет много задач для нас на лету (т. Е. Когда клиент запрашивает актив), что мы должны были делать вручную раньше, что экономит время.
Вот несколько причин, по которым вы можете использовать Munee:
-
Мы часто вносим небольшие изменения в наши файлы CSS, LESS, SCSS, JavaScript и CoffeeScript. Каждый раз, когда мы вносим изменения, нам нужно их компилировать и минимизировать. Муни делает это для нас на лету.
-
Существует много серверов общего веб-хостинга, на которых не включен gzip. Если вы используете Munee, он сжимает файлы с помощью PHP, игнорируя это ограничение.
-
Вам не нужно беспокоиться о добавлении директив кэширования в файлы .htaccess . Munee позаботится о кэшировании ресурсов как на сервере, так и на стороне клиента.
-
Munee может управлять изображениями на лету и очень удобен для адаптивного веб-дизайна. Вам не нужно поддерживать разные файлы изображений для разных размеров.
Это лишь некоторые из случаев, когда вы можете найти Munee очень полезным.
Как работает Munee?
После установки Munee он автоматически запускает кэширование ресурсов на сервере, отправляет надлежащие заголовки кэширования на стороне клиента и начинает отправку сжатых gzip-ответов, а также скомпилированного вывода для запрошенных файлов LESS, SCSS и CoffeeScript.
Чтобы предоставить инструкции Munee для работы с изображениями или минимизации файлов CSS и JS, вам необходимо добавить параметры строки запроса к пути ресурсов.
Чтобы иметь возможность манипулировать или минимизировать активы, Munee должен перехватывать запросы клиентов на CSS, LESS, SCSS, JS, CoffeeScript и различные файлы форматов изображений. Чтобы позволить munee перехватывать запросы клиентов на эти ресурсы, нам нужно добавить внутреннее правило перезаписи в файл .htaccess (инструкции Nginx также следуют ниже).
Munee использует другие сторонние библиотеки, такие как imagineleafomeenietedivm
Параметры строки запроса, предназначенные для предоставления инструкций Munee, называются фильтрами.
Как Munee кеширует активы?
Для реализации кэширования на стороне клиента он устанавливает заголовки Cache-Control: must-revalidate Он также считывает заголовки кэширования в HTTP-запросах и отправляет ответ или статус 304 Not Modified
Для реализации кэширования на стороне сервера он хранит скомпилированные, минимизированные и управляемые ресурсы в отдельном каталоге.
Он может обнаруживать изменения в исходных активах во время выполнения. Когда он обнаруживает изменение в исходном ресурсе, он обновляет кэш сервера, а также заставляет клиентов использовать последние файлы.
Установка Муни
Установить с помощью:
composer require meenie/munee
В случае, если вы пытаетесь установить Munee на сервере общего хостинга, composer requirevendor
Теперь нам нужно создать файл PHP, который отвечает за оптимизацию, манипулирование, компиляцию и минимизацию ресурсов с помощью Munee.
Для этого создайте файл PHP с именем munee.php
<?php
require "vendor/autoload.php";
echo \Munee\Dispatcher::run(new \Munee\Request());
Теперь нам нужно перенаправить запросы к ресурсам, таким как CSS, LESS, SCSS, JS, CoffeeScript и файлы различных форматов изображений, в munee.php . Мы можем сделать это, используя внутренние правила перезаписи URL сервера.
Если вы используете Apache, поместите этот код в файл .htaccess каталога, в котором находится файл munee.php :
RewriteEngine On
RewriteRule ^(.*\.(?:css|less|scss|js|coffee|jpg|png|gif|jpeg))$ munee.php?files=/$1 [L,QSA,NC]
Если вы используете Nginx, то вы должны изменить фактические настройки виртуального хоста для правила перезаписи URL согласно этой проблеме и этой сути .
Если на вашем сервере отключен .htaccess.htaccessmunee.php
<script src="munee.php?files=index.js"/>
В оставшейся части урока мы будем предполагать, что вы используете .htaccess
Все ресурсы в дереве каталогов, в которые установлен Munee, будут оптимизированы.
Компиляция SCSS, LESS и CoffeeScript
Чтобы скомпилировать SCSS / LESS и CoffeeScript в CSS и JavaScript соответственно на лету, вам нужно указать эти файлы в HTML. Munee будет обрабатывать компиляцию автоматически на стороне сервера.
Вот пример кода, демонстрирующего это:
<link rel="stylesheet" href="index.scss">
<link rel="stylesheet" href="index.less">
<script src="index.coffee"/>
Для файлов SCSS и LESS заголовок ответа Content-Typetext/css
Аналогично, для файлов Coffee заголовок ответа Content-Typetext/javascript
Сокращение CSS и JS файлов
Чтобы минимизировать файлы CSS и JS или скомпилированные выходные данные LESS, SCSS и CoffeeScript, нам нужно добавить minify=true
<link rel="stylesheet" href="index.scss?minify=true">
<link rel="stylesheet" href="index.less?minify=true">
<link rel="stylesheet" href="index.css?minify=true">
<script src="index.js?minify=true" />
<script src="index.coffee?minify=true" />
Манипулирование изображениями
Munee позволяет нам изменять размеры, обрезать и раскрашивать изображения на лету. Помимо этого он также позволяет нам преобразовывать изображения в оттенки серого, преобразовывать изображения в негативные, а также использовать изображения по умолчанию вместо отсутствующих.
Изменение размера, растяжение и обрезка изображений
Чтобы изменить размер изображения на лету, нам нужно использовать фильтр resize Значение фильтра resize
Вот пример, который показывает, как изменить высоту и ширину изображения на 100 пикселей, если оно выше этого:
<img src="myImage.jpg?resize=width[100]-height[100]">
Мы также можем предоставить только аргумент высоты или ширины, если мы хотим изменить размер, сохраняя соотношение сторон.
Чтобы обрезать изображение, нам нужно предоставить exact[true] Вот пример, чтобы продемонстрировать это:
<img src="myImage.jpg?resize=width[100]-height[100]-exact[true]">
Здесь изображение будет обрезано до 100px высоты и ширины.
Мы также можем добавить stretch=true Вот пример, чтобы продемонстрировать это:
<img src="myImage.jpg?resize=width[100]-height[100]-stretch[true]">
Эти функции Munee очень полезны для адаптивного и адаптивного веб-дизайна.
Заполнители для отсутствующих изображений
Если изображение отсутствует на сервере, мы можем использовать изображение-заполнитель. Для этой функции нет фильтра. Скорее, вы должны добавить эти инструкции в файл munee.php
require "vendor/autoload.php";
echo \Munee\Dispatcher::run(
new \Munee\Request(array(
"image" => array(
"placeholders" => array(
"/tourism/*" => "http://placedog.com/100/100",
"*" => WEBROOT . DS . "img" . DS . "my-placeholder-image.jpg"
)
)
))
);
Здесь, внутри массива placeholders В приведенном выше примере для всех отсутствующих изображений в подкаталоге tourismhttp://placedog.com/100/100my-placeholder-image.jpg
Безопасность манипулирования изображениями
Работа с изображениями занимает много памяти и процессорного времени. Хакеры могут отключить ваш сервер, снова и снова запрашивая измененные изображения. Munee имеет встроенные способы решения этой проблемы:
- Реферер должен быть в том же домене, где находится изображение.
- Он не хранит более 3-х манипулированных версий изображения в течение 5 минут.
Объединение активов
Разработчики обычно объединяют файлы JavaScript и CSS, чтобы уменьшить общее количество HTTP-запросов, необходимых для извлечения всех ресурсов. Munee может комбинировать файлы HTML, CSS, JS, LESS, SCSS и CoffeeScript.
Чтобы объединить ресурсы, нам просто нужно указать пути к файлам через запятую в HTML.
Вот пример, чтобы продемонстрировать это:
<link rel="stylesheet" type="text/css" href="index.css,index.scss?minify=true">
<script src="index.js,index.coffee?minify=true"></script>
Здесь мы объединяем index.cssindex.scss Мы также передали minify=true Munee скомпилирует index.scss
Точно так же мы объединяем index.jsindex.coffee
Munee API
Библиотека также предоставляет API для приложений, чтобы вручную оптимизировать, манипулировать и минимизировать активы. Вам нужно будет изучить этот API, только если вы планируете создать библиотеку, которая использует Munee в качестве зависимости.
Вы можете узнать больше об этом API в официальной документации .
Вывод
Существует много других вариантов управления активами, но если вы хотите, чтобы управление активами происходило «на лету», Munee кажется лучшим выбором. Вы можете узнать о других фильтрах, предоставленных Munee в их официальной документации .
Как вы управляете своими активами? Выбираете маршрут NodeJS или избегаете его ? Ты пробовал Муни? Дайте нам знать об этом в комментариях!