如何缩小CSS/JS文件(使用UglifyJS和UglifyCSS)

编辑本页

警告:您正在浏览的文档欧宝官网下载appob娱乐下载Symfony 3.4，现已不再维护。

读本页的更新版本用于Syob娱乐下载mfony 6.2(当前稳定版本)。

谨慎

从Symfony 2.8开始ob娱乐下载，在Symfony标准版中不再默认包含Assetic。指这篇文章学习如何在您的Symfony应用程序中安装和启用Assetic。ob娱乐下载

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

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

node . js模块。首先，你需要安装node . js然后，决定安装方法:全局或本地。

谨慎

一些Linux发行版将Node.js二进制重命名为节点来nodejs．这可能会导致类似的错误"/usr/bin/env: node: No such file or directory"．你可以用符号链接来解决这个问题:

1
＄Ln -s /usr/bin/nodejs /usr/bin/node

1
＄NPM install -g uglify-js

现在可以执行全局变量了uglifyjs在系统的任意位置执行命令:

1
＄uglifyjs——帮助

- g选项，并指定放置模块的路径:

1 2
＄cd/道路/ /你/ symfoob娱乐下载ny /项目＄npm install uglify-js——prefix app/Resources

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

现在可以执行uglifyjs命令，生活在node_modules目录:

1
＄”。/ 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

请注意

安装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

过滤器选项，以告诉Assetic使用uglifyjs2过滤器:

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

请注意

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

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

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

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

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

提示

除了向资产标记添加筛选器之外，您还可以配置应用程序配置文件中的每个文件应用哪些筛选器。看到如何应用一个汇编过滤器到特定的文件扩展名欲知详情。

1 2 3 4 5 6
#全局安装＄NPM install -g uglifycss#本地安装＄cd/道路/ /你/ symfoob娱乐下载ny /项目＄npm install uglifycss

接下来，添加这个过滤器的配置:

  • YAML
  • XML
  • PHP
1 2 3 4 5
# app / config / config.ymlassetic:过滤器:uglifycss:本:/usr/local/bin/uglifycss

要为CSS文件使用过滤器，请将过滤器添加到astic样式表助手:

1 2 3
{%样式表'bundles/App/css/*' filter='uglifycss' filter='cssrewrite' %}<链接rel＝“样式表”href＝＂{{asset_url}}＂/>{%endstylesheets%}

就像uglifyjs2过滤器，如果在过滤器名称前加上?(即。uglifycss ?)，缩小只会发生在你不在调试模式。

此工作，包括代码示例，是根据创作共用BY-SA 3.0许可证。