e-sites / zepto-builder Goto Github PK

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

Home Page: http://github.e-sites.nl/zeptobuilder/

License: MIT License

CSS 6.03% JavaScript 85.93% HTML 8.04%

zepto-builder's Introduction

Zepto Builder

Zepto Builder is the web based equivalent of the regular Zepto build process and will let you generate a custom version that just includes the modules you need.

The service itself is located @ http://github.e-sites.nl/zeptobuilder/

Why this tool?

By default, Zepto provides a build tool, based on Node.js and Coffeescript. So, why this tool? Well, mainly because a web interface is far more accessible and easier to use than a CLI.

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.

Gulp task

Gulp is used to create a distribution build. By running the default Gulp 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

Credits

First and foremost, of course, Thomas Fuchs of Zepto fame (and all it's contributors). Also, Mihai Bazon, the creator of Uglify, and Greg Franko the author of DownloadBuilder.

Browser support

Tested in the latest (stable) versions of Google Chrome, Mozilla Firefox, Opera and (Mobile) Safari. As for Internet Explorer; since version 1.0.0 it relies on the WebWorker API, so at least IE10 is required to run ZB properly.

License

zepto-builder's People

Contributors

Stargazers

Watchers

Forkers

zmilan hadesain cybernetics mopvhs eworthcms cherrylhh dszls fakerbaba jkiss digideskio isdom bryant1410 web-oop blue-tear

zepto-builder's Issues

Paste in header from previous build to set options

I was rebuilding a set of options I used in an old project, which had the following header:

/* Zepto 1.0rc1 - polyfill zepto event detect fx ajax form fx_methods - zeptojs.com/license */

it would have been nice to be able to just paste that somewhere to set the options for a new build, rather than have to parse the list of modules that do not seem to be in any specific order.

ps: I ended up manually selecting this set:

// Zepto 1.1.3 (generated with Zepto Builder) - zepto event ajax form detect fx fx_methods - zeptojs.com/license

Interface improvements

Use official Zepto logo
Colors based on zeptojs.com
Flat / material design-ish?
Responsive
...

// Generated by Zepto Builder - modules: zepto event ajax ie

pick a decent unit-test tool (QUnit?);
making it part of the default Gulp task;

View source link/icon doesn't work

When clicking the Github icon found in each module pane, the module is being (de)selected, instead of taking the user to the source code.

I'm using Firefox 53.

Preserve copyright in minified code

E.g.

/* Zepto 1.1.2 - zepto event ajax ie - zeptojs.com/license */