使用一些生成的密钥将js / css文件缩小为资产的方法

时间:2013-06-27 19:19:40

标签: php javascript css ruby-on-rails

我已经构建了几年的Web应用程序,探索并寻找提高Web应用程序性能的方法。我想问一下,当我们自动启动Web应用程序时,是否有任何方法可以缩小css / js?我不使用任何PHP框架,而是我自己构建。

我正在探索一个Web应用程序,我看到他们有这个

<link href="/assets/application-76c372b1409e29d226c9566022d5546f.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cb571d9ff5185e712000e3378494e4ee.js" type="text/javascript"></script>

我看到类似网站的js和css文件存储在/ assets / etc中,名称也以application-too开头。我想知道你是否有人知道他们使用的是什么机制?我确信他们以同样的方式压缩文件。

知道他们正在使用什么框架/编程语言?

建议表示赞赏。感谢

1 个答案:

答案 0 :(得分:1)

此功能通常内置于您正在使用的Web框架中,或者SASS,Compass,Uglify和Grunt等外部程序系列可以完成这项工作。 有很多方法可以做到这一点,但我将解释这个原则,只是一种方法。

通常,原则是在部署过程中,将所有文件连接在一起,获取内容的哈希值(如MD5和),并根据该哈希创建文件名。

例如,如果你有:

  • 源/资产/ reset.css
  • 源/资产/ main.css的
  • 源/资产/ fonts.css

您可以清除输出资产目录,该目录与源资产目录分开,因此您不会覆盖任何内容,然后将这3个文件连接在一起,获取MD5哈希,然后创建名为application- $ hashvalue的文件.css,并将内容写入其中。

连接很有帮助,但您也可以通过CSSMin,JSMin,Google的Closure Compiler等许多其他方法运行它。

如果您想亲自手动完成所有这一切。你当然不是第一个解决这个问题的人,并且有很多工具可以帮你解决这个问题。

为您执行此操作的一般示例工具集:

Grunt,作为任务选手。其他一切的主管。 Uglify,JS的缩小器 SASS + Compass来管理和缩小您的CSS grunt-contrib-uglify:一个将Grunt连接到Uglify的插件 grunt-contrib-compass:将Grunt连接到Compass的插件

那么你只需运行你的grunt文件就可以为你编译所有内容。您可以在部署期间执行此操作,也可以在本地运行目录监视器。

特定于PHP的资产管理:

https://github.com/kriswallsmith/assetic

不幸的是,这是我唯一知道的,因为我不再使用PHP了。