UglifyJS是一个JavaScript解析器/压缩机/美化者工具包。它可以用来结合和贬低JavaScript资产以便他们需要更少的HTTP请求和使你的网站加载速度更快。UglifyCSS是一个CSS压缩机/美化者UglifyJS非常相似。

在这个食谱中,安装、配置和使用UglifyJS所示的细节。UglifyCSS几乎以相同的方式工作,只是简要讨论。

node . js使用npm npm模块和可以安装。首先,你需要安装node . js。之后您可以安装使用npm UglifyJS:

1

npm安装- g uglify-js美元

此命令将安装全球UglifyJS,您可能需要作为根用户运行它。

请注意

也可以安装UglifyJS只在您的项目。要做到这一点,没有安装它- g选择和指定路径,把模块:

1 2 3

美元cd/路径/ / syob娱乐下载mfony mkdir app /资源/ node_modules npm美元安装uglify-js——prefix app /资源

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

根据你的安装方法,您应该能够执行uglifyjs全球可执行,或者执行住在的物理文件node_modules目录:

1 2 3

美元uglifyjs——帮助美元/ app /资源/ 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:配置>< !——本: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本- g

它应该输出一个文件夹在您的系统上,在里面你应该找到UglifyJS可执行。

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

你现在可以访问uglifyjs2过滤器在您的应用程序。

节点二进制

Assetic试图找到节点自动二进制。如果它找不到,你可以配置它的位置使用节点关键:

• 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@AcmeFooBundle /资源/公共/ js / *’过滤器= ' uglifyjs2 ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

1 2 3 4 5 6

< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’),数组(“uglifyj2s”))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >

请注意

上面的示例假设您有一个包AcmeFooBundle和你的JavaScript文件资源/公共/ js目录在你的包。然而这并不重要——你可以包括你的JavaScript文件,无论他们在哪里。

添加uglifyjs2过滤器上面的资产标签,您现在应该看到缩小JavaScripts过来快得多。

app_dev.php)模式。你可以通过加前缀过滤器的名字在你的模板有一个问号:吗?。这告诉Assetic只适用这个过滤器(例如当调试模式。app.php):

• 嫩枝
• PHP

1 2 3

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

1 2 3 4 5 6

< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’),数组(”? uglifyjs2”))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >

试试这个,切换到你的刺激环境(app.php)。但在你做之前,别忘了明确你的缓存和转储assetic资产。

提示

而不是将过滤器添加到资产标签,您还可以在全球范围内使它通过添加apply_to过滤器配置属性,例如uglifyjs2过滤器apply_to:“美元\ . js”。只有过滤器应用于生产,加上这个config_prod文件而不是常见的配置文件。应用过滤器的文件扩展名的详细信息,请参见如何应用一个Assetic过滤到一个特定的文件扩展名。

1

npm安装- g uglifycss美元