编程语言
首页 > 编程语言> > PHP-Javascript缩小自动化

PHP-Javascript缩小自动化

作者:互联网

我有一个网站,使用了很多jquery / javascript.现在,在索引页面上,我的头中包含大约10个javascript文件:

<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery_plugin_1.js"></script>
<script src="/js/jquery_plugin_2.js"></script>
<script src="/js/jquery_plugin_3.js"></script>
<script src="/js/my_scripts_1.js"></script>
<script src="/js/my_scripts_2.js"></script>
<script src="/js/my_scripts_3.js"></script>
<script src="/js/my_scripts_4.js"></script>
<!-- ...and so on -->
</head>

随着访问者人数的增加,我开始考虑所有这些功能的性能.我读过,最好缩小所有JavaScript文件并将它们收集在一起,因此浏览器必须仅发出一个HTTP请求.我是这样现在,我拥有了包含所有JavaScript的everything.js文件,包括jquery,插件和我的自定义脚本.

<head>
<!--
<script src="/js/jquery.js"></script>
<script src="/js/jquery_plugin_1.js"></script>
<script src="/js/jquery_plugin_2.js"></script>
<script src="/js/jquery_plugin_3.js"></script>
<script src="/js/my_scripts_1.js"></script>
<script src="/js/my_scripts_2.js"></script>
<script src="/js/my_scripts_3.js"></script>
<script src="/js/my_scripts_4.js"></script>
...
-->
<script src="/js/everything.js"></script>
</head>

当我需要更改其中一个文件时,乐趣就开始了.每次要检查我的更改是否按预期工作,我需要压缩文件并更新everything.js或取消对所有旧代码的注释.通过这种工作流程,很容易忘记某些东西并犯错.

问题:是否有自动化的东西可以消除这种头痛?可以让我像以前一样编辑单独的文件,并在准备好测试更改时将所有内容缩小并汇总在一起吗?

我正在使用PHP5和SVN

谢谢大家的帮助,我找到了解决方案:
我将在我的SVN存储库中放入一个提交后钩子,该钩子将接收所有.js文件,将它们放在一起并使用YUI压缩器将它们最小化.然后,在我的脚本中,我将分叉javascript include,以便在开发环境中该站点将包括单独的javascript文件,但在生产中将包括合并和缩小的文件.

解决方法:

我们有定制的部署脚本来处理它.简而言之,它将使用YUI Compressor压缩所有CSS和JavaScript文件,并将它们打包为两个文件,一个为常规文件,另一个为特定页面提供特定逻辑.完成后,我们将创建一个带有打包文件的文件夹的符号链接(或新文件夹,具体取决于项目),并且新更改会立即传播.除开发外,所有环境都将使用此方法.

在缩小之前,这是CSS结构的外观(JavaScript大致相同,只是为了给您一个主意):

css/Layout/Core/reset.css
css/Layout/Core/index.css
css/Layout/Tools/notice.css
css/Layout/Tools/form.css
css/Layout/Tools/overlay.css
css/Skin/Default/Core/index.css
css/Skin/Default/Tools/notice.css
css/Skin/Default/Tools/form.css
css/Skin/Default/Tools/overlay.css
css/Layout/Tools/gallery.css
css/Layout/Tools/comments.css
css/Layout/Tools/pagination.css
css/Layout/Index/index.css
css/Skin/Default/Tools/gallery.css
css/Skin/Default/Tools/comments.css
css/Skin/Default/Tools/pagination.css
css/Skin/Default/Tools/achievements.css
css/Skin/Default/Tools/labels_main.css
css/Skin/Default/Index/index.css

后:

minified/1290589645/css/common.css
minified/1290589645/css/0135f148a7f6188573d2957418119a9a.css

我们喜欢这种方法,因为它不涉及任何其他动态代码.这只是部署问题,每两周生产一次.我们的暂存环境每天都会更新,有时甚至每天更新一次,而且我们还没有遇到任何问题.

标签:performance,minify,javascript,php
来源: https://codeday.me/bug/20191023/1914696.html