This is a very, very simple build tool to packege the js and css includes in a html file into one combined js and css (optionally minified) files
##easypack - The super simple js and css build tool.
Ever wished you had in your fontend only webprojects, the cool feature of popular web-frameworks like rails that preprocess all the static js and css files before pushing your webpages to production? Thats exactly easypacks does!
Easypack will take your html file, and pickup all the static css and js files you have marked and will join them into single js and css files and will publish a new html file for you. It can also optionally do a simple minify (currently no bells and whistles) on js and css files.
###Installation Download Node.js if you haven't already. Then inside the webroot directory run:
$ npm install easypack
###Usage Create a build.js file like below and execute it using nodejs
/** Sample build.js*/var sb = require'easypack';sbbuildwebRoot : 'yourWebRootDir'inputHtml : "main.html"outputHtml : "index.html"jsBuildName : "app.js"timeStampBuild : true;
Note: If you installed easypack within ther webroot of your website then leave
webRoot : ''or donot provide this option. Optionally if you installed easypack outside your webroot, then provide a relative or absoloute path to webroot in your build script.
###Marking scripts for build
Suppose the main html of your web site is main.html here is how to mark the scripts that build tool should bundle into one file. Notice the data-build="true" attribute in the script tags. Thats what marks scripts to be picked up.
easypack will pick up the first three scripts in the list and combine them into one javasctipt file which you provided in options using 'jsbuild' option. Then a new html file will be generated at the same path as main.html, with the new combined script included. All the scripts that were not marked for building will be left alone.
Why do this? So that when you push put new code you can be sure that browsers will discard the cached copies of your old code and fetch a new one!
##Learn by example
$ npm install easypack
- Then run the build.js
$ node build.js
CSS build support completed.
Minify and build css files. base-64 encoding of images referenced in the css. Also resolves the url includes for things like fonts and included css to relative paths.
The support for packing css file is exactly similar way as js files using parameter
cssBuildName : "yourstyle.css"
and add data-build="true" attribute in the css link tags
Shaunak Vairagare (@shaunakv1).