[javascript] Zepto Builder: A web based Zepto customizer

Zepto Builder: A web based Zepto customizer

Zepto Builder is an online version of Zepto’s ./make dist. Choose which modules you want to include from the list and get your own custom build.

Homepage: http://github.e-sites.nl/zeptobuilder/
GitHub: https://github.com/e-sites/Zepto-Builder

 

Zepto Builder will let you generate a custom version of Zepto that just includes the modules you need.

 

Getting started

After cloning (or downloading) the repo you must run npm install to fetch all dependencies, when this is done all Bower packages will automatically be downloaded and a browser build of Uglify will be created. Needless to say, for this to work you will need to have Node.js and Bower installed on your machine.

Grunt task

Grunt is used to create a distribution build. By running the default Grunt task it will optimize all resources and store them in the dist folder. The files located in this folder are prepared to be uploaded / deployed as is.

Under the hood

So, how does this tool actually work? Well, altough Zepto offers a CLI-based build tool I have decided to make it client-side only, based on DownloadBuilder. The process from selecting the modules to actually generating the build (and minify it) is:

• all available Zepto module metadata (i.e. name, size and URL) is dynamically fetched from GitHub and cached (for now this is session based);
• the module descriptions are mapped via a static JSON file (assets/json/modules.json) and are shown when hovering the table rows;
• based on ones selection the modules will be fetched from GitHub and concatenated by DownloadBuilder
• the minification process is handled by a browser build of Uglify