UglifyJS是一个JavaScript解析器/压缩器/美化器工具包。它可以用来组合和缩小JavaScript资产，以便它们需要更少的HTTP请求，并使您的站点加载更快。UglifyCSS是一个CSS压缩器/美化器，非常类似于UglifyJS。

在这本烹饪书中，详细展示了UglifyJS的安装、配置和使用。UglifyCSS的工作原理与此基本相同，这里只简单介绍一下。

node . jsNPM模块，可以使用NPM安装。首先，你需要安装node . js．然后你可以使用npm安装UglifyJS:

1

$ NPM install -g uglify-js

这个命令将全局安装UglifyJS，您可能需要以根用户身份运行它。

请注意

也可以只在项目中安装UglifyJS。要做到这一点，请在没有- g选项，并指定放置模块的路径:

1 2 3

＄cd/path/to/ob娱乐下载symfony $ mkdir app/Resources/node_modules $ npm install uglify-js——prefix app/Resources

建议将UglifyJS安装在您的app /资源文件夹，并添加node_modules文件夹到版本控制。或者，你也可以创建一个npmpackage.json文件并在那里指定依赖项。

根据您的安装方法，您应该能够执行uglifyjs全局可执行文件，或执行位于node_modules目录:

1 2 3

$ uglifyjs——帮助$ ./app/Resources/node_modules/.bin/uglifyjs——.帮助

uglifyjs2过滤器

现在，我们需要配置Symfony以使用ob娱乐下载uglifyjs2过滤器处理您的javascript:

• YAML
• XML
• PHP

1 2 3 4 5 6

# app / config / config.ymlassetic:过滤器:uglifyjs2:# uglifyjs可执行文件的路径本:/usr/local/bin/uglifyjs

1 2 3 4 5 6 7

<！——app/config/config.xml——><assetic:配置><！——bin: uglifyjs可执行文件的路径——><assetic:过滤器的名字＝“uglifyjs2”箱子＝“/ usr /地方/ bin / uglifyjs”/>assetic:配置>

1 2 3 4 5 6 7 8 9

/ / app / config / config . php＄容器->loadFromExtension (“assetic”，数组（“过滤器”= >数组（“uglifyjs2”= >数组（// uglifyjs可执行文件的路径“本”= >“/ usr /地方/ bin / uglifyjs”，)，)，));

请注意

安装UglifyJS的路径可能因系统而异。来找出npm存储箱子文件夹时，可以使用以下命令:

1

$ NPM bin -g

它应该在您的系统上输出一个文件夹，您应该在其中找到UglifyJS可执行文件。

如果在本地安装UglifyJS，可以找到箱子文件夹中的node_modules文件夹中。它被称为。斌在这种情况下。

您现在可以访问uglifyjs2在应用程序中进行筛选。

节点二进制

astic尝试自动查找节点二进制。方法配置其位置节点关键:

• YAML
• XML
• PHP

1 2 3 4 5 6 7 8

# app / config / config.ymlassetic:#节点可执行文件的路径节点:/usr/bin/nodejs过滤器:uglifyjs2:# uglifyjs可执行文件的路径本:/usr/local/bin/uglifyjs

1 2 3 4 5 6 7

<！——app/config/config.xml——><assetic:配置节点＝“/ usr / bin / nodejs”><assetic:过滤器的名字＝“uglifyjs2”箱子＝“/ usr /地方/ bin / uglifyjs”/>assetic:配置>

1 2 3 4 5 6 7 8

/ / app / config / config . php＄容器->loadFromExtension (“assetic”，数组（“节点”= >“/ usr / bin / nodejs”，“uglifyjs2”= >数组（// uglifyjs可执行文件的路径“本”= >“/ usr /地方/ bin / uglifyjs”，)，));

• 嫩枝
• PHP

1 2 3

{%javascript'@AppBundle/Resources/public/js/*' filter='uglifyjs2' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

1 2 3 4 5 6

<？phpforeach（＄视图［“assetic”］->javascript (数组（@AppBundle /资源/公共/ js / *’)，数组（“uglifyj2s”) ）作为＄url)：? ><脚本src＝“< ?phpecho $view->escape($url) ?>">脚本><？phpendforeach? >

请注意

上面的示例假设您有一个名为AppBundle的包，并且JavaScript文件位于资源/公共/ js目录下的包。但这并不重要——无论JavaScript文件在哪里，你都可以包含它们。

加上uglifyjs2过滤到上面的资产标签，你现在应该看到缩小的JavaScripts传输速度更快。

app_dev.php)模式。你可以通过在模板的过滤器名称前加上一个问号来实现:?．这告诉astic只有在调试模式关闭时才应用这个过滤器。app.php)：

• 嫩枝
• PHP

1 2 3

{%javascript@AppBundle /资源/公共/ js / *’过滤器= ' ?uglifyjs2 ' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

1 2 3 4 5 6

<？phpforeach（＄视图［“assetic”］->javascript (数组（@AppBundle /资源/公共/ js / *’)，数组（'?uglifyjs2”) ）作为＄url)：? ><脚本src＝“< ?phpecho $view->escape($url) ?>">脚本><？phpendforeach? >

要尝试此操作，请切换到您的刺激环境(app.php)．但在你这么做之前，别忘了清除缓存而且抛弃你的资产．

提示

属性，而不是向资产标记添加筛选器，还可以全局启用它apply_to属性设置为筛选器配置，例如uglifyjs2过滤器apply_to:“美元\ . js”．若要只在生产中应用过滤器，请将此添加到config_prod文件，而不是普通的配置文件。通过文件扩展名应用过滤器的详细信息请参见如何应用一个汇编过滤器到特定的文件扩展名．

1

$ NPM install -g uglifycss