通过Munee自动优化资产

Munee is an asset management tool which can compile LESS, SCSS, or CoffeeScript, manipulate images, minify CSS and JS, and cache assets on the server and client on the fly. It works with PHP 5.3 and newer versions.

Munee是一种资产管理工具，可以编译LESS，SCSS或CoffeeScript，处理图像，最小化CSS和JS以及在服务器和客户端上动态缓存资产。 它适用于PHP 5.3和更高版本。

In this tutorial, we will learn how Munee makes it easy to include assets in templates, how to install it, how it works and how to use it.

在本教程中，我们将学习Munee如何使资产轻松包含在模板中，如何安装，如何工作以及如何使用。

Munee is another way to avoid NodeJS in asset management of PHP apps.

Munee是在PHP应用程序的资产管理中避免 NodeJS的另一种方法 。

您为什么要使用Munee？ (Why would you want to use Munee?)

Munee aims to make asset management easier. It performs a lot of tasks for us on the fly (i.e., when the asset is requested by the client) which we had to do manually before, thus saving time.

Munee旨在简化资产管理。 它为我们动态地执行了很多任务(即，当客户请求资产时)，而这是我们之前必须手动执行的，因此节省了时间。

Here are some of the reasons why you may want to use Munee:

以下是您可能要使用Munee的一些原因：

1. We often make small changes to our CSS, LESS, SCSS, JavaScript and CoffeeScript files. Every time we make changes we need to compile and minify them. Munee does this for us on the fly.

   我们经常对CSS，LESS，SCSS，JavaScript和CoffeeScript文件进行一些小的更改。 每次进行更改时，我们都需要编译并最小化它们。 Munee即时为我们做到了。

2. There are many shared web hosting servers which don’t have gzip enabled. If you are using Munee, it compresses files using PHP, ignoring this restriction.

   有许多未启用gzip的共享Web托管服务器。 如果使用的是Munee，它将使用PHP压缩文件，而忽略此限制。

3. You don’t have to worry about adding caching directives to .htaccess files. Munee will take care of both server and client side caching of assets.

   您不必担心将缓存指令添加到.htaccess文件。 Munee将负责服务器和客户端的资产缓存。

4. Munee can manipulate images on the fly and is very handy for responsive web design. You don’t have to maintain different image files for different dimensions.

   Munee可以即时处理图像，非常适合响应式网页设计。 您不必为不同的尺寸维护不同的图像文件。

These are just some of the cases where you can find Munee very useful.

在这些情况下，您可能会发现Munee非常有用。

Munee如何工作？ (How does Munee work?)

Once Munee is installed, it automatically starts caching assets on the server, sends proper client side caching headers, and starts sending gzip compressed responses, as well as compiled output for requested LESS, SCSS and CoffeeScript files.

一旦安装了Munee，它将自动开始在服务器上缓存资产，发送适当的客户端缓存头，并开始发送gzip压缩响应以及请求的LESS，SCSS和CoffeeScript文件的编译输出。

To provide instructions to Munee for manipulating images or minifying CSS and JS files you need to add query string parameters to the path of the assets.

要向Munee提供有关操作图像或缩小CSS和JS文件的说明，您需要向资产路径添加查询字符串参数。

To be able to manipulate or minify assets Munee needs to intercept client requests for CSS, LESS, SCSS, JS, CoffeeScript and various image format files. To let munee intercept client requests for these assets we need to add an internal rewrite rule to .htaccess file (Nginx instructions also follow below).

为了能够操纵或最小化资产，Munee需要拦截客户端对CSS，LESS，SCSS，JS，CoffeeScript和各种图像格式文件的请求。 为了让客户能够截获客户对这些资产的请求，我们需要向.htaccess文件中添加内部重写规则(Nginx指令也请参见下文)。

Munee uses other third-party libraries such as imagine, leafo, meenie, tedivm, etc. to resize, manipulate, compile and minify assets.

Munee使用其他第三方库如imagine ， leafo ， meenie ， tedivm等来调整，操纵，编译和缩小资产。

Query string parameters meant to provide instructions to Munee are called filters.

旨在向Munee提供指令的查询字符串参数称为过滤器。

Munee如何缓存资产？ (How does Munee cache assets?)

For implementing client side caching, it sets Cache-Control: must-revalidate headers while sending responses for the requested assets. It also reads caching headers in HTTP requests and sends a response or 304 Not Modified status depending on whether the client has the latest assets in its cache or not.

为了实现客户端缓存，它会在发送请求资产的响应时设置Cache-Control: must-revalidate标头。 它还会读取HTTP请求中的缓存头，并根据客户端是否在其缓存中发送最新资产来发送响应或“ 304 Not Modified状态。

For implementing server side caching it stores the compiled, minified and manipulated assets in a separate directory.

为了实现服务器端缓存，它将已编译，最小化和已处理的资产存储在单独的目录中。

It can detect changes to the original assets on runtime. When it detects a change in an original asset, it updates the server cache and also forces clients to use the latest files.

它可以在运行时检测对原始资产的更改。 当它检测到原始资产发生变化时，它将更新服务器缓存，并强制客户端使用最新文件。

安装Munee (Installing Munee)

Install with:

安装方式：

composer require meenie/munee

In the case of you trying to install Munee on a shared hosting server,composer require Munee on your local computer manually and upload the vendor directory to the hosting server.

如果您尝试在共享托管服务器上安装Munee，则composer require在本地计算机上手动安装Munee，然后将vendor目录上载到托管服务器。

Now we need to create a PHP file which is responsible for optimizing, manipulating, compiling and minifying assets using Munee.

现在我们需要创建一个PHP文件，该文件负责使用Munee优化，操纵，编译和最小化资产。

For this, create a PHP file called munee.php:

为此，创建一个名为munee.phpPHP文件：

<?php

require "vendor/autoload.php";

echo \Munee\Dispatcher::run(new \Munee\Request());

Now we need to redirect requests to assets such as CSS, LESS, SCSS, JS, CoffeeScript and various image format files to munee.php. We can do this using a server’s internal URL rewrite rules.

现在我们需要将请求重定向到资产，例如CSS，LESS，SCSS，JS，CoffeeScript和各种图像格式文件到munee.php 。 我们可以使用服务器的内部URL重写规则来执行此操作。

If you are using Apache, place this code in the .htaccess file of the directory in which the munee.php file is placed:

如果您使用的是Apache，请将此代码放在munee.php文件所在目录的.htaccess文件中：

RewriteEngine On
RewriteRule ^(.*\.(?:css|less|scss|js|coffee|jpg|png|gif|jpeg))$ munee.php?files=/$1 [L,QSA,NC]

If you are using Nginx then you must modify the actual virtualhost settings for a URL rewrite rule as per this issue and this gist.

如果使用的是Nginx，则必须根据此问题和要点 ，为URL重写规则修改实际的虚拟主机设置。

If .htaccess is disabled on your server or you don’t want to rewrite using .htaccess, then you can manually pass the file path into munee.php instead of an asset path in HTML:

如果.htaccess是您的服务器上禁用或你不想使用重写.htaccess ，那么你可以通过手动将文件路径为munee.php而不是HTML资产的路径：

<script src="munee.php?files=index.js"/>

For the rest of the tutorial, we’ll assume you are using .htaccess.

在本教程的其余部分中，我们假定您正在使用.htaccess 。

All the assets in the directory tree in which Munee is installed will be optimized.

将优化安装Munee的目录树中的所有资产。

编译SCSS，LESS和CoffeeScript (Compiling SCSS, LESS and CoffeeScript)

To compile SCSS/LESS and CoffeeScript to CSS and JavaScript respectively on the fly, you need to point to these files in HTML. Munee will handle the compilation automatically on the server side.

若要将SCSS / LESS和CoffeeScript分别动态编译为CSS和JavaScript，您需要指向HTML中的这些文件。 Munee将在服务器端自动处理编译。

Here is some example code to demonstrate this:

以下是一些示例代码来演示这一点：

<link rel="stylesheet" href="index.scss">
<link rel="stylesheet" href="index.less">

<script src="index.coffee"/>

For the SCSS and LESS files, the response header Content-Type will be text/css, and the response body text will be compiled CSS.

对于SCSS和LESS文件，响应标头Content-Type将为text/css ，响应正文文本将为CSS编译。

Similarly, for Coffee files the response header Content-Type will be text/javascript, and the response body will be compiled JS.

同样，对于Coffee文件，响应头Content-Type将为text/javascript ，并且响应主体将为JS编译。

缩小CSS和JS文件 (Minifying CSS and JS Files)

To minify CSS and JS files or compiled LESS, SCSS and CoffeeScript output we need to add minify=true to the path of the asset in HTML:

为了最小化CSS和JS文件或编译后的LESS，SCSS和CoffeeScript输出，我们需要在HTML中资产的路径中添加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" />

操纵图像 (Manipulating Images)

Munee lets us resize, crop and colorize images on the fly. Apart from this it also let’s us convert images to grayscale, convert images to negative and also use default images in place of missing ones.

Munee让我们可以即时调整图像大小，裁剪和着色。 除此之外，我们还可以将图像转换为灰度图像，将图像转换为负图像，并使用默认图像代替丢失的图像。

调整大小，拉伸和裁剪图像 (Resizing, Stretching and Cropping Images)

To resize images on the fly we need to use the resize filter. The value of the resize filter is a set of arguments.

要即时调整图像大小，我们需要使用resize滤镜。 resize过滤器的值是一组参数。

Here is an example which shows how to change the height and width of an image to 100px if it’s above that:

这是一个示例，显示了如何将图像的高度和宽度更改为100px以上：

<img src="myImage.jpg?resize=width[100]-height[100]">

We can also provide only the height or width argument if we want to resize keeping the aspect ratio.

如果要调整尺寸以保持宽高比，我们也只能提供height或width参数。

To crop an image we need to provide an exact[true] argument along with height and width. Here is an example to demonstrate this:

要裁剪图像，我们需要提供一个height exact[true] width exact[true]和一个exact[true]参数。 这是一个示例来证明这一点：

<img src="myImage.jpg?resize=width[100]-height[100]-exact[true]">

Here the image will be cropped to exactly 100px height and width.

在这里，图像将被裁剪为正好100px的高度和宽度。

We can also add stretch=true to stretch or resize an image to 100px height and width. Here is an example to demonstrate this:

我们还可以添加stretch=true将图片拉伸或调整为100px的高度和宽度。 这是一个示例来证明这一点：

<img src="myImage.jpg?resize=width[100]-height[100]-stretch[true]">

These features of Munee are very useful for responsive and adaptive web design.

Munee的这些功能对于自适应和自适应网页设计非常有用。

丢失图像的占位符 (Placeholders for Missing Images)

If an image is missing from the server, then we can use a placeholder image. For this functionality there is no filter. Rather, you have to add these instructions to the munee.php file:

如果服务器中缺少图像，则可以使用占位符图像。 对于此功能，没有过滤器。 相反，您必须将以下说明添加到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"
            )
        )
    ))
);

Here inside the placeholders array, we can provide a URL or path for placeholders of images missing in different sub directories. In the above example for all missing images inside the tourism sub-directory we are using http://placedog.com/100/100 as a placeholder, whereas for every other missing image we are using my-placeholder-image.jpg.

在placeholders数组中，我们可以为不同子目录中缺少的图像的占位符提供URL或路径。 在上面的示例中，对于tourism子目录中所有丢失的图像，我们使用http://placedog.com/100/100作为占位符，而对于其他所有丢失的图像，我们都使用my-placeholder-image.jpg 。

图像处理安全性 (Image Manipulation Security)

Image manipulation takes a lot of memory and CPU time. Hackers can take down your server by requesting manipulated images again and again. Munee has built-in ways to tackle this issue:

图像处理需要大量内存和CPU时间。 黑客可以一次又一次地请求操纵图像来关闭服务器。 Munee具有解决此问题的内置方法：

1. Referer should be the same domain where the image is located.
   引荐来源网址应与图片所在的域相同。
2. It doesn’t keep more than 3 manipulated versions of an image in a time span of 5 minutes.
   在5分钟的时间内，它不会保留超过3个图像的操纵版本。

合并资产 (Combining Assets)

Developers usually combine JavaScript and CSS files to reduce the total number of HTTP requests required to fetch all assets. Munee can combine HTML, CSS, JS, LESS, SCSS and CoffeeScript files.

开发人员通常将JavaScript和CSS文件结合在一起，以减少获取所有资产所需的HTTP请求总数。 Munee可以合并HTML，CSS，JS，LESS，SCSS和CoffeeScript文件。

To combine assets, we just need to provide the file paths comma separated in HTML.

要合并资产，我们只需要提供用逗号分隔的文件路径(以HTML格式)。

Here is an example to demonstrate this:

这是一个示例来证明这一点：

<link rel="stylesheet" type="text/css" href="index.css,index.scss?minify=true">

<script src="index.js,index.coffee?minify=true"></script>

Here we are combining index.css and index.scss into one file. We have also passed minify=true to minify the output. Munee will compile index.scss to CSS before sending a response.

在这里，我们将index.css和index.scss组合到一个文件中。 我们还传递了minify=true来最小化输出。 Munee将编译index.scss到CSS发送响应之前。

Similarly, we are combining index.js and index.coffee into one file.

同样，我们将index.js和index.coffee组合到一个文件中。

Munee API (Munee API)

The library also provides an API to applications to manually optimize, manipulate and minify assets. You will only need to learn this API if you are planning to build a library which uses Munee as dependency.

该库还为应用程序提供API，以手动优化，操纵和最小化资产。 仅当您计划构建使用Munee作为依赖项的库时，才需要学习此API。

You can find out more about this API in the official documentation.

您可以在官方文档中找到有关此API的更多信息。

结论 (Conclusion)

There are many other options for managing assets but if you want assets to be managed on the fly, Munee seems like the best choice. You can learn about other miscellaneous filters provided by Munee in their official documentation.

还有许多其他管理资产的选项，但是如果您希望即时管理资产，Munee似乎是最佳选择。 您可以在Munee的官方文档中了解其他杂项过滤器。

How do you manage your assets? Taking the NodeJS route or avoiding it? Did you try Munee? Let us know in the comments!

您如何管理资产？ 采取NodeJS路线还是避免路线？ 您尝试过Munee吗？ 让我们在评论中知道！

翻译自: https://www.sitepoint.com/automatic-asset-optimization-with-munee/