Assetic入门

There was a time when asset management meant little more than inserting a <link> tag or two and a couple of <script> tags into your HTML.

曾经有一段时间，资产管理只不过是在HTML中插入一个或两个<link>标签和两个<script>标签。

Nowadays, though, that approach just won’t cut it. There’s performance, for one thing. Assets are a significant performance drain both in terms of file size and the number of HTTP requests – optimizing both has become an essential part of the development process. This has been exacerbated by the proliferation of mobile devices.

但是，如今，这种方法无法解决问题。 一方面，有表演。 资产无论是在文件大小还是在HTTP请求数量方面都是严重的性能消耗–优化两者已成为开发过程的重要组成部分。 移动设备的激增加剧了这一点。

Also, as client-side applications have become more and more sophisticated, managing dependencies amongst scripts and libraries has become increasingly complex.

另外，随着客户端应用程序变得越来越复杂，脚本和库之间的依赖关系管理也变得越来越复杂。

Furthermore, technologies such as Less, Compass and Coffeescript require assets to be compiled, adding yet another step to the process of managing assets.

此外，诸如Less，Compass和Coffeescript之类的技术需要对资产进行编译，这又增加了资产管理过程的另一步骤。

In this article I’m going to look at a PHP package called Assetic which helps manage, compile and optimize assets such as scripts, stylesheets and images.

在本文中，我将介绍一个名为AsseticPHP软件包，该软件包可帮助管理，编译和优化资产，例如脚本，样式表和图像。

什么是资产管理？ (What is asset management?)

Let’s start by looking at what asset management actually is.

让我们从实际的资产管理开始。

At its simplest, it’s a way of managing what resources are required by a website or a web application – or a specific page – and their dependencies. This might involve ensuring a particular library is available to your JavaScript, or making sure a CSS reset is applied before your other styles.

简单地说，它是一种管理网站或Web应用程序或特定页面所需的资源及其依赖关系的方法。 这可能涉及确保您JavaScript可以使用特定的库，或者确保在其他样式之前应用CSS重置。

It sometimes helps to look at asset management in terms of several distinct stages. The first is compilation, a necessary step if you’re using a CSS framework such as Less, SASS, SCSS, Stylus, Compass etc, or something like Coffeescript or Dart. There are also a few additional compilation steps involved in some JavaScript-based tools; for example compiling Handlebars, Twig or Mustache templates.

有时可以从几个不同的阶段来看资产管理。 首先是编译，如果您使用的是CSS框架(如Less，SASS，SCSS，Stylus，Compass等)或诸如Coffeescript或Dart之类的文件，则这是必需的步骤。 一些基于JavaScript的工具还涉及其他一些编译步骤； 例如编译车把，树枝或小胡子模板。

The next stage is optimization. For CSS, typically you’ll minify your stylesheet files when you go into production mode. For JavaScript, you’d probably minify or pack your source files. Images can often be reduced quite significantly in size using various compression algorithms, and in some cases you can also reduce the number of HTTP requests by BASE-64 encoding them and embedding the data in your stylesheets.

下一步是优化。 对于CSS，进入生产模式时通常会缩小样式表文件。 对于JavaScript，您可能会缩小或打包源文件。 使用各种压缩算法通常可以显着减少图像的大小，并且在某些情况下，还可以通过BASE-64编码对它们并将数据嵌入样式表中来减少HTTP请求的数量。

Finally, concatenation. Reducing the number of HTTP requests can have significant performance gains, so CSS and JavaScript files are often concatenated together into a single, large file for each type. The technique of building “sprites” applies the same principle to images, though that’s outside the scope of this article.

最后，串联。 减少HTTP请求的数量可以显着提高性能，因此，对于每种类型，CSS和JavaScript文件通常被合并为一个大文件。 尽管不属于本文的范围，但是构建“图片”的技术将相同的原理应用于图像。

资产介绍 (Introducing Assetic)

Assetic is a PHP package designed to help with the asset management process.

Assetic是一个PHP软件包，旨在帮助进行资产管理过程。

There are a couple of important concepts to understand when getting started with Assetic – collections and filters.

开始使用Assetic时，有几个重要概念需要理解- 集合和过滤器 。

A collection groups together a bunch of assets. A single file is an asset. ‘Nix users in particular will be familar with glob, which is essentially a way of collecting together a bunch of files whose filenames match a particular pattern; Assetic treats these as an asset as well. For example, the glob patterm /assets/js/*.js refers to all files in /assets/js with the .js extension.

集合将一堆资产组合在一起。 单个文件是资产。 '特别是有九位用户熟悉glob，这本质上是一种将文件名与特定模式匹配的文件收集在一起的方式； Assetic也将它们视为资产。 例如，全局patterm /assets/js/*.js引用/assets/js扩展名为.js所有文件。

A filter is applied to a collection to modify it in some way. If you refer back to the idea of stages in the asset management process, you can think of each stage as being implemented by one or more filters. So for example, one filter might be responsible for compilation, and one for minification.

将过滤器应用于集合以某种方式对其进行修改。 如果您回顾资产管理流程中各个阶段的概念，则可以认为每个阶段都是由一个或多个过滤器实现的。 因此，例如，一个过滤器可能负责编译，而另一个则负责缩小。

Different filters are usually applied to different collections. For example, you might have a project with the following:

通常将不同的过滤器应用于不同的集合。 例如，您可能有一个包含以下内容的项目：

1. A collection of .less files which are compiled with the Less filter, minified using a CSS minification filter and concatenated into one CSS file.

   .less文件的集合，这些文件使用Less过滤器进行编译，使用CSS缩小过滤器进行缩小，然后串联到一个CSS文件中。

2. A collection of .css files which are simply minified

   .css文件的集合，这些文件只需缩小即可

3. A collection of Coffeescript files are compiled using the Coffeescript filter, minified using the Google Closure Compiler filter, then concatenated into one .js file.

   使用Coffeescript过滤器编译一组Coffeescript文件，使用Google Closure Compiler过滤器将其缩小，然后合并为一个.js文件。

The exact combinations of file types and filters will depend on what technologies you’re using and your personal preference, such as your preferred minifier.

文件类型和过滤器的确切组合将取决于您所使用的技术以及您的个人喜好，例如您首选的压缩程序。

Assetic provides support for numerous modules, giving you the flexibility to choose whichever approach you prefer. For example, it’s up to you whether you minify your JavaScript using JSMin, the YUI Compressor or the Google Closure Compiler.

Assetic为众多模块提供支持，使您可以灵活地选择自己喜欢的方法。 例如，由您决定是否使用JSMin，YUI压缩器或Google Closure编译器来缩小JavaScript。

安装Assetic (Installing Assetic)

You can install Assetic by downloading or cloning from Github or better still, via Composer:

您可以通过Composer 从Github下载或克隆或更好地安装Assetic：

"kriswallsmith/assetic": "1.2.*@dev"

There are also Assetic packages available on Packagist for frameworks such as Zend Framework, Symfony, Laravel and Silex.

Packagist上还提供了Assetic软件包，可用于Zend Framework ， Symfony ， Laravel和Silex等框架 。

用法 (Usage)

Let’s start with a simple example – creating an asset collection to concatenate a bunch of JavaScript files:

让我们从一个简单的示例开始-创建资产集合以连接一堆JavaScript文件：

$js = new AssetCollection(array(
    new GlobAsset('/assets/js/libs/*'),
    new FileAsset('/assets/js/app.js'),
));

print $js->dump();

The code above takes all .js files from /assets/js/libs and then the file /assets/js/app.js, and concatenates them when dump() is called – we’ll look at what you do with the output shortly.

上面的代码从/assets/js/libs获取所有.js文件，然后从文件/assets/js/app.js获取文件，并在调用dump()时dump()它们连接起来–我们将很快对输出进行处理。

You can extend the above example by adding a filter – in this case, it uses JSMin to minify the resulting JavaScript:

您可以通过添加过滤器来扩展上述示例–在这种情况下，它使用JSMin来缩小生成JavaScript：

$scripts = new AssetCollection(array(
    new GlobAsset('/assets/js/libs/*'),
    new FileAsset('/assets/js/app.js'),
), array(
    new JSMinFilter(),
));

print $scripts->dump();

Note: If you wish to use JSMin, you can use the following PHP implementation: "lmammino/jsmin4assetic": "1.0.*@dev" (view it on Github here).

注意：如果您想使用JSMin，则可以使用以下PHP实现： "lmammino/jsmin4assetic": "1.0.*@dev" (在Github上查看 )。

Your stylesheets will need a separate asset collection, given that the filters behave differently. Suppose you have a bunch of CSS files, and you’re using Less to define your grid:

假定过滤器的行为不同，您的样式表将需要单独的资产集合。 假设您有一堆CSS文件，并且正在使用Less来定义网格：

$styles = new AssetCollection(array(
    new FileAsset('/assets/less/grid.less', array(new LessFilter())),
    new GlobAsset('/assets/css/*'),
), array(
    new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),
));

print $styles->dump();

This uses the LessFilter to compile grid.less, concatenates it along with all the .css files in /assets/css, then compresses the whole thing using the YUI compressor.

这将使用LessFilter编译grid.less ，将其与/assets/css所有.css文件连接在一起，然后使用YUI压缩器压缩整个内容。

Note that in order to get the example above working, you’ll need to ensure you have the YUI Compressor installed correctly, ensure that the path to its .jar files is correct, and add the following to your composer.json: "leafo/lessphp": "0.4.*@dev"

请注意，为了使上面的示例正常工作，您需要确保正确安装了YUI Compressor，确保其.jar文件的路径正确，然后将以下内容添加到composer.json ： "leafo/lessphp": "0.4.*@dev"

If you’d rather use CssMin than the YUI Compressor, you’ll need to install it, and your code becomes:

如果要使用CssMin而不是YUI Compressor，则需要安装 ，代码将变为：

$styles = new AssetCollection(array(
    new FileAsset('/assets/less/grid.less', array(new LessFilter())),
    new GlobAsset('/assets/css/*'),
), array(
    new CssMinFilter(),
));

print $styles->dump();

If you’re using SASS instead of Less, install SCSSphp by adding the following to your composer.json:

如果您使用的是SASS而不是Less，请通过将以下内容添加到composer.json来安装SCSSphp ：

"leafo/scssphp": "dev-master"

You can then use ScssphpFilter to compile your SASS assets.

然后，您可以使用ScssphpFilter来编译您的SASS资产。

You can optimize images, too. In this example, we use glob to grab all images files from assets/img and compress them with OptiPng, then do the same with Jpegs but use Jpegoptim:

您也可以优化图像。 在此示例中，我们使用glob从assets/img获取所有图像文件，并使用OptiPng对其进行压缩 ，然后对Jpegs进行相同操作，但使用Jpegoptim ：

$images = new AssetCollection(array(
    new GlobAsset('/assets/img/*.png', array(new OptiPngFilter())),
    new GlobAsset('/assets/img/*.jpg', array(new JpegoptimFilter()),
));

经理类和AssetFactory (Manager Classes and the AssetFactory)

There are other ways to configure your assets. The AssetManager class is essentially a keyed store of assets – for example, you can collect the asset collections we defined in the previous section together like this:

还有其他配置资产的方法。 AssetManager类本质上是资产的键存储-例如，您可以像上一节一样收集我们在上一节中定义的资产集合：

$am = new AssetManager();
$am->set('jquery', new FileAsset('/path/to/jquery.js'));
$am->set('scripts', $scripts);
$am->set('styles', $styles);

The FilterManager class works in much the same way:

FilterManager类的工作方式大致相同：

$fm = new FilterManager();
$fm->set('sass', new SassFilter('/path/to/parser/sass'));
$fm->set('yui_css', new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'));

Then you can use the AssetFactory class to simplify the whole process:

然后，您可以使用AssetFactory类来简化整个过程：

use Assetic\Factory\AssetFactory;

$factory = new AssetFactory('/path/to/asset/directory/');
$factory->setAssetManager($am);
$factory->setFilterManager($fm);
$factory->setDebug(true);

$styles = $factory->createAsset(array(
    '@reset',         // load the asset manager's "reset" asset
    'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/"
), array(
    'scss',           // filter through the filter manager's "scss" filter
    '?yui_css',       // don't use this filter in debug mode
));

echo $styles->dump();

输出量 (Output)

I’ve shown how to select what you want to include and how to apply filters; but I haven’t yet looked at where you do this or how you reference it. There are a number of approaches you can take.

我已经展示了如何选择要包含的内容以及如何应用过滤器； 但我尚未查看您在哪里进行操作或如何引用它。 您可以采取多种方法。

One possibility is to create a PHP file in a publicly accessible directory, e.g. JavaScripts.php and reference it from your HTML as if it were an asset:

一种可能性是在可公共访问的目录(例如JavaScripts.php )中创建一个PHP文件，并从您HTML中引用它，就好像它是资产一样：

<script src="/assets/JavaScripts.php"></script>

Or, you could create a file called stylesheets.php and embed it inline:

或者，您可以创建一个名为stylesheets.php的文件并将其内联：

<style>
<?php include('/assets/stylesheets.php');
</style>

Alternatively you could generate .css and .js files and just reference those as normal. You can use the AssetWriter for this:

另外，您也可以生成.css和.js文件，然后.js引用它们。 您可以为此使用AssetWriter ：

use Assetic\AssetWriter;

$scripts.js = new AssetCollection(array(
    new GlobAsset('/assets/js/libs/*'),
    new FileAsset('/assets/js/app.js'),
), array(
    new JSMinFilter(),
));

// Set target path, relative to the path passed to the
// AssetWriter constructor as an argument shortly
$scripts->setTargetPath('scripts.js');
$am->set('scripts.js', $scripts.js);

// see above for instantiation of $styles
$styles->setTargetPath('stylesheets.css');
$am->set('styles', $styles);

$writer = new AssetWriter('/assets/build');
$writer->writeManagerAssets($am);

You could create a command-line script to do this as part of your workflow, or use a tool such as Guard to “watch” the filesystem and re-run it whenever one of the relevant files has changed.

您可以创建命令行脚本来将其作为工作流的一部分来执行，也可以使用诸如Guard的工具来“监视”文件系统，并在相关文件之一发生更改时重新运行它。

快取 (Caching)

Assetic ships with a simple file-based caching mechanism to ensure that filters aren’t run unnecessarily. Here’s an example of caching the output of the YUI Compressor:

Assetic附带了一个简单的基于文件的缓存机制，以确保过滤器不会不必要地运行。 这是一个缓存YUI Compressor输出的示例：

use Assetic\Asset\AssetCache;
use Assetic\Asset\FileAsset;
use Assetic\Cache\FilesystemCache;
use Assetic\Filter\Yui;

$yui = new Yui\JsCompressorFilter('/path/to/yuicompressor.jar');
$js = new AssetCache(
    new FileAsset('/path/to/some.js', array($yui)),
    new FilesystemCache('/path/to/cache')
);

// the YUI compressor will only run on the first call
$js->dump();
$js->dump();
$js->dump();

摘要 (Summary)

In this article I’ve introduced Assetic – a PHP package for managing assets. I’ve shown how you can use it to manage dependencies, run compilation processes, minify / pack / compress / optimise assets, and concatenate files to minimise the number of HTTP requests. Be sure to check out the documentation for details of all the available filters; or, you could even look at implementing FilterInterface / extending BaseFilter with a view to defining your own. For packages which complement it, refer to the suggested packages either when you first install it, or by inspecting the suggests section of its composer.json file.

在本文中，我介绍了Assetic –一个用于管理资产PHP软件包。 我已经展示了如何使用它来管理依赖项，运行编译过程，缩小/打包/压缩/优化资产以及连接文件以最大程度地减少HTTP请求的数量。 请务必查看文档以获取所有可用过滤器的详细信息。 或者，您甚至可以考虑实现FilterInterface /扩展BaseFilter以便定义自己的视图。 对于补充它的软件包，请在首次安装时参考建议的软件包，或者通过检查其composer.json文件的suggests部分来参考。

翻译自: https://www.sitepoint.com/getting-started-assetic/