在生产环境中我们需要把前端js/css静态文件合并以减少请求次数来达到提高页面访问速度，但是在开发环境我们并不需要合并这些文件方面我们debug，这时候只需要按照下面的方法就可以轻松实现环境切换来针对静态文件的合并压缩。

项目运行环境的切换

首先在项目根目录下建立.env文件来

APP_ENV=dev

这里通过APP_ENV这个变量来切换当前环境，dev用于开发环境，而production用于正式生产环境，另外需要注意的是如果是生产环境还需要到config/app.php文件中把debug设置为false以免暴露项目关键信息。

前端静态文件的处理

同样前端的静态文件我们也需要根据不同的环境来做压缩与合并的单独处理

{% if this.environment == 'dev' %}
    <script src="{{ 'assets/vendor/jquery.min.js'|theme }}"></script>
    <script src="{{ 'assets/semantic/dist/semantic.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/app.js' | theme }}"></script>
    {% framework extras %}
{% else %}
    <script src="{{ [
     'assets/vendor/jquery.js',
     'assets/semantic/dist/semantic.js',
     'assets/javascript/app.js',
     '@framework',
     '@framework.extras'
     ]|theme }}"></script>
{% endif %}

HTML文件的压缩

虽然css/js文件可被系统内置的压缩工具很好地处理，但是html部分系统这部分处理的不是很好，OctoberCMS提供了{% spaceless %}标签来处理一些合并需求，但是它并不是适用于整页html文件的压缩，如

正常情况

压缩前

<div>
    <p>
        Hello world
    </p>
</div>

压缩后

<div><p>Hello world</p></div>

特殊情况

压缩前

<div>
    <img
        src="/whatever.jpg"
        alt="Some image">
</div>

压缩后

<div><img
        src="/whatever.jpg"
        alt="Some image"></div>

解决方法

要解决这个问题目前我是使用这个插件来实现，插件本身也是基于Twig的插件移植过来的，所以质量上应该没什么问题。

一些基础使用说明

• Tag{% htmlcompress %} ... {% endhtmlcompress %}
• Function{{ htmlcompress('some html') }}
• Filter{{ content|markdown|htmlcompress }}

案例

{% htmlcompress %}{% endhtmlcompress %}

{{ htmlcompress('<ul> <li>') }}

{{ '<ul> <li>'|htmlcompress }}