README

这是一个简单的资产管理器，用于管理 js 和 css 文件。

功能

• 合并不同的 css 和 js 文件到一个文件中
• 压缩 css 和 js（最小化）
• 控制浏览器缓存
• 在开发环境中实时编译资产
• 使用远程 js 和 css（例如 CDN）
• 处理内联 css 和 js

安装

composer require dmitrynaum/sam

使用

项目根目录下必须有一个配置文件 sam.json，其中描述了 SAM 所需的所有参数

{
    "devServerAddress" : "Адрес сервера на котором работает сервер компиляции ассетов на лету",
    "assetBasePath" : "Базовая папка куда будут сохранены все asset`ы. Должна быть доступна из web без учета rootDir!",
    "rootDir"       : "Публичная папка приложения (в которую можно попасть через WEB).",
    "resultMapPath" : "Путь до карты скомпилированных asset`ов ",
    "assets" : { 
        "Название файла в который будет сохранен скомпилированный asset (app.css) является названием asset`а " : [
            "Файл который будет объединен с другими и записан в app.css",
            "Файл который будет объединен с другими и записан в app.css"
        ]
    }
}

sam.json 的示例

{
    "devServerAddress" : "127.0.0.1:8090",
    "assetBasePath" : "build/",
    "rootDir"       : "public/",
    "resultMapPath" : "asset/map.json",
    "assets" : {
        "app.css" : [
            "https:///maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css",
            "jquery-ui.css",
            "asset/css/first.css",
            "asset/css/second.css"
        ],
        "jquery-ui.css" : [
            "asset/vendor/jquery-ui/jquery-ui.css",
            "asset/vendor/jquery-ui/skin.css"
        ]
    }
    
}

资产文件将保存在由 rootDir+assetBasePath 指定的文件夹中。例如，上面的示例中的资产 app.css 将保存在 public/build/app.css

编译

有几种编译资产的模式。

1. 简单编译。SAM 只会收集所有资产

php vendor/bin/sam build

1. 带最小化的编译。资产将被收集和最小化

php vendor/bin/sam build -m

1. 带哈希的编译。资产将被收集，并在结果文件的名称中添加它们的哈希。这有助于避免浏览器缓存问题

php vendor/bin/sam build -f

1. 带最小化和哈希的编译。

php vendor/bin/sam build -m -f

还可以为资产编译器指定 sam.json 的路径。

php vendor/bin/sam build my_sam.json -m -f

渲染

要将资产添加到您的网站模板中，请执行以下两个简单命令

<?php
// Добавляем asset
Dmitrynaum\SAM\Asset::useCss('app.css');
// Выводим asset на страницу
echo Dmitrynaum\SAM\Asset::renderCss();

带属性的渲染

<?php
// Добавляем asset
Dmitrynaum\SAM\Asset::useJs('app.js');
// Выводим asset на страницу
echo Dmitrynaum\SAM\Asset::renderJs(['defer']);

远程资源

要使用远程 js 和 css 文件，您可以使用 Dmitrynaum\SAM\Asset::useRemoteJs() 和 Dmitrynaum\SAM\Asset::useRemoteCss() 方法。SAM 不会对它们进行任何缓存，它只会将资源链接包装在相应的 HTML 标签中

<?php
// ...
Dmitrynaum\SAM\Asset::useJs('https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js');
Dmitrynaum\SAM\Asset::useCss('https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css');
// ...
echo Dmitrynaum\SAM\Asset::renderCss();
echo Dmitrynaum\SAM\Asset::renderJs();

内联 css & js

Dmitrynaum\SAM\Asset::addInlineJs('alert("hello")');
Dmitrynaum\SAM\Asset::addInlineJs('alert("world")');
Dmitrynaum\SAM\Asset::addInlineCss('body{color:green;}');
Dmitrynaum\SAM\Asset::addInlineCss('h1{size:34px;}');

echo Dmitrynaum\SAM\Asset::renderInlineCss();
echo Dmitrynaum\SAM\Asset::renderInlineJs();

/**
* Результат работы
*
*<style>body{color:green;}
*h1{size:34px;}</style>
*
*<script>alert("hello");
*alert("world")</script>
*/

实时编译

为了方便在 SAM 中开发，预置了实时编译资产的功能。

为此，您需要在开发环境中向 SAM 通知它应该处于开发模式，并启动 SAM 的内置 web 服务器。

<?php
// ...
if (App::isDevelopment()) {
    Dmitrynaum\SAM\Asset::enableDevelopmentMode();
}
// ...

php vendor/bin/sam start-server

之后，所有资产都可通过 http://127.0.0.1:8090?asset=asset_name 访问，并且每次请求所需的资产时都会实时编译。

注意！

请勿在生产环境中使用 SAM 的内置服务器。这是不安全的！