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.
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):
After:
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.