Javascript minification automatization

问题

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>

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>

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?

I'm using PHP5 and SVN

SOLUTION

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.

回答1:

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.

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

After:

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.

回答2:

I think you should check if your scripts are working ok when they are in one file and then compress that file. We don't have many files so we are using a js minifier for each file using yui compressor. If you are using an automated deployment you should perform minification and then deployment, otherwise a batch script should be ok.

回答3:

Honestly I havent done this before, but I came across this two solutions and thought they might be helpful to you:

jMerge

Automatic merging and versioning of CSS/JS files with PHP

Good luck!

回答4:

create a php file like this and save it as merger_js.php in your js dir

<?php
ob_start ("ob_gzhandler");
$f=$_GET['f'];
if(@file_exists($f)){
    $inhoud = file_get_contents($f);
    header("Content-type: application/javascript; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
}else{
// file not found, we return empty
 $inhoud= "";
}
print $inhoud;

call your java like this

<script type='text/javascript' src='js/merger_js.php?f=blackcan.js'></script>

Now your javascript file is send zipped to the browser. Make sure you server can handle gzip ( normally this is installed by default)

Hope this helps

来源：https://stackoverflow.com/questions/4386279/javascript-minification-automatization

标签

php

javascript

performance

minify