Javascript缩小自动化 [英] Javascript minification automatization
问题描述
我有一个网站，它使用了大量的jquery / javascript。现在，在索引页面我有大约10个javascript文件包含在头部：
I have a website, that uses a lot of jquery/javascript. Now, at the index page I have about 10 javascript files included in the head:
<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请求。我这样做了。现在我有 everything.js 包含所有javascript的文件，包括jquery，插件和我的自定义脚本。
Since visitor count grows bigger, I am starting to think about performance of all of this. I have read, that it is good idea, to minify all javascript files and gather them together in one, so a browser must make only one HTTP request. I did so. Now I have everything.js file containing all javascript, including jquery, plugins and my custom scripts.
<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 或取消注释所有旧代码。通过这种工作流程，很容易忘记并犯错误。
The fun starts, when I need to make changes to one of the files. Every time, to check if my changes are working as expected, I need to compress the file and update everything.js or uncomment all the old code. With this kind of work-flow it is too easy to forget something and make a mistake.
问题：是否有自动化的东西可以把这头痛带走了？还有什么东西可以让我按照以前的方式编辑单独的文件，并且当我准备测试我的更改时会缩小并整理所有内容？
Question: is there an automated thing that can take this headache away? Something, that would allow me to edit my separate files as I used to, and would minify and pull together everything when I'm ready to test my changes?
我' m使用PHP5和SVN
I'm using PHP5 and SVN
解决方案
感谢大家的帮助。 ，我找到了我的解决方案：
我将在我的SVN仓库中放置一个 post-commit 钩子，它将占用我所有的 .js 文件，将它们放在一起并使用YUI压缩器缩小它们。然后，在我的脚本中我将分叉javascript包含，这样在开发环境中该站点将包含单独的javascript文件，但在生产中将包含组合和缩小的文件。
Thank you for your help, everybody, I found my solution:
I will put a post-commit hook in my SVN repo that will take all my .js files, put them together and minify them using YUI compressor. Then, in my script I will fork javascript includes, so that in development environment the site will include separate javascript files, but in production the combined and minified file will be included.
推荐答案
我们有自定义部署脚本来处理它。简而言之，它使用 YUI Compressor 缩小所有CSS和JavaScript文件，并将它们打包最多两个文件，一个通用文件和另一个具有给定页面的特定逻辑的文件。完成后，我们创建一个符号链接（或一个新文件夹，具体取决于项目）到包含文件的文件夹，并立即传播新的更改。这种方法将用于除开发之外的所有环境。
We have custom deploy script taking care of it. In short, it minifies all CSS and JavaScript files using YUI Compressor and packs them in up to two files, one general and another one with specific logic for a given page. Once done, we create a symlink (or a new folder, depending on the project) to the folder with packed files and new changes are propagated instantly. This approach is used will all environments except development.
在缩小之前，这就是CSS结构的样子（对于JavaScript来说，它或多或少是相同的，它只是为了给你一个想法）：
Before minification, this is what CSS structure looks like (it's more or less the same for JavaScript, it's just to give you an idea):
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
我们喜欢这种方法，因为它不涉及任何额外的代码需要动态处理。这只是一个部署问题，每两周发生一次。我们的登台环境每天更新，有时甚至每天更新一次，我们还没有遇到任何问题。
We like this approach since it doesn't involve any additional code to be processed on the fly. It's just a matter of deployment which happens once every two weeks to production. Our staging environment is updated every day, sometimes even more than once a day, and we have not had any problems yet.
这篇关于Javascript缩小自动化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
