This makes remembering which file contains the code I want very easy, but of course it means my app has dozens of JS and CSS files. As all web developers know - lots of files means lots of requests to the server means a sloooow site.
So, obviously, the answer is to concatenate all your JS files into one long file, and then use a tool like Yahoo's Compressor to shrink the javascript file into a fraction of it's former size.
I make a shell script like this:
jsfiles=(
trees.js
toast.js
armchair.js
)
for p in "${jsfiles[@]}"; do cat "$p"; done > code.js
java -jar yuicompressor.jar -o release/code-min.js codejs
So this is all great, but it left me with an issue. While I'm developing and debugging, it's essential my page links to the dozens of original javascript files so I can trace errors back to the source files, and set breakpoints more easily. But I need a version of the HTML page which links only to the minified version of the javascript and css files.. For a while I did keep two versions of the HTML, but as the page got more complicated keeping two files up to date wasn't practical.
My solution was to implement a basic 'conditional complication' system - where I could mark parts of the HTML file as being debug-only, and other parts as release-only. I knocked together a build script that would take the original HTML, knock out the debug parts, and uncomment the release only sections.
<head>
<!--DEBUG-->
<script type="text/javascript" src="js/trees.js"></script>
<script type="text/javascript" src="js/toast.js"></script>
<script type="text/javascript" src="js/armchair.js"></script>
<link rel="stylesheet" type="text/css" href="css/trees.css"/>
<link rel="stylesheet" type="text/css" href="css/toast.css"/>
<link rel="stylesheet" type="text/css" href="css/armchair.css"/>
<!--ENDDEBUG-->
<!--RELEASE
<script type="text/javascript" src="code-min.js"></script>
<link rel="stylesheet" type="text/css" href="style-min.css"/>
ENDRELEASE-->
</head>
<body>
</body>
Here's an example. Note that the release section is commented out - this means I can open the page directly and be in 'debug mode' with full access to all the script and css files via my browser's inspector.
Then it's a case of running a simple regex script (I used 'jsc', the javascript script engine built into Safari) to make the release version.
var i = arguments[0]; // the first parameter - e.g. the content of the HTML file
// Replace debug block with nothing..
i = i.replace(/<!--DEBUG[\s\S]*?ENDDEBUG-->/g, ""); // /g ensures EVERY match is replaced, not just the first. *? means use the smallest match (default is largest)
// Remove comment around production
i = i.replace(/<!--RELEASE([\s\S]*?)ENDRELEASE-->/g, "$1");
Simple hey?
No comments:
Post a Comment