wrewolf/minifier-bundle

此捆绑包允许您在不使用Java VM的情况下压缩HTML代码、合并和压缩JavaScript文件和CSS文件。

安装: 23

依赖者: 0

建议者: 0

安全: 0

星级: 0

关注者: 0

分支: 12

类型:symfony-bundle

dev-master 2018-01-30 17:32 UTC

This package is not auto-updated.

Last update: 2024-09-23 07:07:29 UTC


README

此Symfony2捆绑包允许您在不使用Java VM的情况下压缩HTML代码、合并和压缩JavaScript文件和CSS文件。

安装

使用composer.json安装

如果您使用composer管理项目,只需将以下行添加到您的composer.json文件中

{
    "require": {
    	"wrewolf/minifier-bundle": "dev-master"
    }
}

然后更新供应商库

composer.phar update
# OR
composer.phar update wrewolf/minifier-bundle # to only update the bundle

注册捆绑包

您必须在内核中注册捆绑包

<?php

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
        // ...
        new Wrewolf\Bundle\MinifierBundle\SemaMinifierBundle(),
    );
    // ...
}

使用方法

您有两种方式来压缩HTML

  1. onKernelResponse监听器
  2. Twig扩展

使用onKernelResponse监听器启用压缩HTML

您需要在config.yml中添加以下行

    #app/config.yml
    wrewolf_minifier:
        enable_listener: true

所有响应都将被压缩

使用Twig扩展启用压缩HTML

您需要修改基本模板(base.html.twig或layout.html.twig或其他),在文件顶部添加{% minifyhtml %},在文件底部添加{% endminifyhtml %}。您需要得到以下内容

    #base.html.twig
    {% minifyhtml %}
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>{% block title %}Welcome!{% endblock %}</title>
            {% block stylesheets %}{% endblock %}
            <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        </head>
        <body>
            {% block body %}{% endblock %}
            {% block javascripts %}{% endblock %}
        </body>
    </html>
    {% endminifyhtml %}

##使用合并和压缩js或css文件 配置文件是一个JSON文件,它描述了合并静态文件的所有规则。每个组分配一个文件名,我们在模板中引用这个文件名。这允许您不依赖于文件的物理位置,这在您更改文件结构时很有用。以下是示例配置文件assets.json

{
    "css": {
        "main": {
            "output": "assets/css/dist/main.min.css",
            "input": [
                "bundles/framework/css/structure.css",
                "bundles/framework/css/body.css"
            ]
        }
    },
    "js": {
        "vendor": {
            "output": "assets/js/dist/vendor.min.js",
            "input": [
                "assets/libs/jquery/dist/jquery.js"
            ]
        },
        "html5shiv": {
            "output": "assets/js/dist/html5shiv.min.js",
            "input": "assets/libs/html5shiv/dist/html5shiv.js"
        },
        "form": {
            "output": "assets/js/dist/form.min.js",
            "input": [
                "assets/libs/parsleyjs/dist/parsley.js",
                "assets/libs/jquery-ui/jquery-ui.js",
                "assets/js/form.js"
            ]
        }
    }
}

根据调试模式,扩展将传输一个模式或源文件的数组,或处理文件的数组。以下是一个示例模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
          {% for url in assets.css['main'] %}
              <link rel="stylesheet" href="{{ asset(url) }}" />
          {% endfor %}
        {% endblock %}
        <!--[if lt IE 9]>
            <script src="{{ asset(assets.js['html5shiv'][0], version='1') }}"></script>
        <![endif]-->
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
          {% for url in assets.js['vendor'] %}
              <script src="{{ asset(url) }}"></script>
          {% endfor %}
        {% endblock %}
    </body>
</html>