README

此库允许您将资源打包成一个文件，以便更快速地加载。

安装

composer require dc/bundler

或者在 composer.json 中

"require": {
    "dc/bundler": "master"
}

设置

此软件包依赖于 dc/router，但强烈建议安装 dc/ioc。下面的示例假设两者都已安装。

\DC\Bundler\Bundler::registerWithContainer(
    $container,
    new \DC\Bundler\BundlerConfiguration(
        $config, // see the configuration section
        \DC\Bundler\Mode::Production, 
        "bar")
    );

编译后的资源存储

这是一个您可以自己实现的接口，以选择编译文件的存储位置。它是一个非常简单的接口。

默认的内置实现（FileBasedCompiledAssetStore）在 Linux 上默认将文件存储在 /tmp/dc_bundler，在 Windows 上存储在 C:\Windows\temp\dc_bundler。在注册时，将其构造函数传递您想要使用的文件夹。

配置

Bundler 接受 PHP 多维数组或磁盘上 JSON 文件的路径作为其配置。出于速度考虑，建议使用 PHP 数组，并在整个文档中使用。

配置应具有以下结构

[
    "__webroot" => "/var/www",
    "bundlename" => [
        "transform" => [
            // array of transforms to apply to these files in order
        ],
        "parts" => [
            // array of file names or other bundles to process
        ],
        "watch" => [
            // array of file names to watch for recompile
        ]
    ]
]

Web 根目录非常重要，因为配置中的所有路径都是相对于该根目录的。这需要是您本地 Web 根目录的路径，以便 Bundler 可以找到文件并提供非打包版本。

除了 Web 根目录外，配置还包括一系列名称，这些名称指向单个打包文件。要使打包文件成为打包文件，您至少需要 parts 键。这指定了要包含在打包文件中的文件，但您也可以在这里编写新的打包文件（请参阅以下嵌套打包）。

包括文件时，您指定一个相对于 Web 根目录的 glob 表达式。以下是一些示例

• app/app.js — app 目录中的 app.js 文件。
• app/directives/*.js — app/directives 中的所有 .js 文件。您已经知道了。
• app/templates/**/*.html — app/templates 的任何子目录中的所有 .html 文件。

监视指定了需要监视以确定是否需要重新编译打包文件的其他文件。这对于例如 Less 文件很有用，其中 @import 语句对 Bundler 不可见。然后，添加一个匹配特定子目录中所有文件的 watch glob，如果这些文件中的任何一个发生变化，则重新编译打包文件。

转换指定了对此打包文件中的项目应执行哪些转换。每个转换都有一个名称，并且所有这些都作为其自己的 Composer 软件包提供。

• less 用于将 Less 转换为 CSS（请参阅 dc/bundler-less）
• ngtpl 用于将 Angular 模板缓存为 JavaScript（请参阅 dc/bundler-ngtpl）
• jsmin 用于压缩 JavaScript（请参阅 dc/bundler-jsmin）

如果您没有指定转换，则默认转换将是 ["bundle"]，这意味着它将简单地按顺序连接所有部分。

特殊的 "bundle" 转换是唯一一次在多个项目上执行转换的转换。这使得您可以在打包发生时做出决定——如果您指定 ["bundle", "jsmin"]（这与 ["jsmin"] 相同），则打包在压缩之前发生。相反，如果您指定 ["jsmin", "bundle"]，则打包在单独对每个文件应用压缩之后发生。

嵌套打包

在某些情况下，嵌套打包很有用。一个常见的用例是想要将以下项目包含在您的打包文件中

• 第三方库（已压缩）
• 您网站上的 JavaScript 代码（使用 Angular 编写）
• Angular模板，适用于您的JavaScript

这里有一个可能适合您的配置

[
    "__webroot" => "/var/www",
    "site.js" => [
        "parts" => [
            // do nothing with dependencies
            "app/dependencies/*.js", 
            [
                // minify everything you've written yourself
                "transform" => ["jsmin"],
                "parts" => [
                    "app/app.js",
                    "app/controllers/*.js",
                    "app/directives/*.js",
                    [
                        // convert Angular templates to JS
                        "transform => ["ngtpl"]
                        "parts" => ["app/templates/**/*.html"]
                    ]
                ]
            ]
        ]
    ]
]

自动路由

如果您确保dc/router了解'\DC\Bundler\BundleController，那么您的包将可以直接在您的应用程序中使用。URL是/bundle/{cacheBreaker}/{bundlename}，所以对于上面的示例：/bundle/foo/site.js。

{cacheBreaker}允许（强制）您在每次更改时轻松跳过每个用户的缓存。这是确保所有用户都获得最新资源的推荐方法。

将包包含在您的HTML中

Bundler::getTagsForBundle通过输出给定包所需的全部HTML标签来帮助您。它自动跟踪调试/生产模式，并输出正确的标签。它甚至处理在调试模式下需要编译的Less文件的情况。

如果您正在使用如Smarty之类的模板系统，以下代码片段可能对您有所帮助

<?php
$smarty->registerPlugin(
    "function", 
    "bundle", 
    function(array $params) use (\DC\Bundler\Bundler $bundler) {
        return $bundler->getTagsForBundle($params['name']);
    });

然后您可以在模板中轻松使用这些包

{bundle name="site.css"}

在生产环境中这将生成以下HTML

<link rel="stylesheet" type="text/css" src="/bundle/foo/site.css" />

在调试模式下这将生成以下结果

<link rel="stylesheet" type="text/css" src="/app/styles/bootstrap.css" />
<link rel="stylesheet" type="text/css" src="/bundle/foo/site.css?part=app/styles/app.less" />

哇哦，魔法！