public
Last active

Psuedo code for a JS/CSS packager for static HTML apps

  • Download Gist
packager.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
//manifest.js: defines the grouping of js/css
var $packager.assets = {
'app.js': [
{ name:'jquery.js', wait:true },
{ name:'sfasdf.js', wait:true },
{ name:'fasdt.js', wait:true }
],
'app.css': [
'blueprint.css',
'style.css'
]
}
 
// config.js: defines the environment you're currently in.
// if mode == development, non-minified/non-compressed js files are loaded,
// else if mode == production, only the minified/compressed version is loaded
var $packager.config = { mode: 'development' }
 
//index.html
<script src="config.js"></script>
<script src="package.js"></script>
<script>
$packager.use('app.js')
</script>
 
// $packager.use is how you load your js. Underneath it uses LABjs
$packager.use = function(scriptName){
if($packager.config.mode=='production'){
$LAB.script(scriptName)
} else {
for(var script in $packager.assets[scriptName]) {
if(script.wait) $LAB.script(script.name).wait();
else $LAB.script(script.name);
}
}
}
 
// of course we need a CLI based builder that will spit out
// compressed/minified versions of the js/css defined in
// the manifest.js
//
// $ node build.js manifest.js

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.