HTML5 App Builder with Modernizr, jQuery and Kinvey
You can find the GitHub repo here and see a screencast of installing the tool and creating an HTML5 project at the bottom of the post.
Finally, I had a breakthrough. I stumbled across the node-build-script project (suggestion to maintainers: give it a better name.) The node-build-script tool is exactly what I had in mind as a basis for my Kinvey project builder. This project is a grunt template with a set of cleverly written tasks that will produce a pristine customizable HTML5 project based on html5-boilerplate.
So I forked that and linked it to point to my Kinvey fork of html5-boilerplate. I renamed the tool from h5bp to k5bp to avoid name collisions for folks already using h5bp. See the repo h5bp-project-builder in all its glory.
To install my new tool, run the following one-liner install script:
$ curl https://raw.github.com/gist/2416597/install.sh | sh
After installing you can generate an HTML5 project with Modernizr, jQuery and Kinvey libraries…
$ k5bp init
A picture of the final default project structure follows:
. ├── 404.html ├── LICENSE-MIT ├── apple-touch-icon-114×114-precomposed.png ├── apple-touch-icon-144×144-precomposed.png ├── apple-touch-icon-57×57-precomposed.png ├── apple-touch-icon-72×72-precomposed.png ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── crossdomain.xml ├── css │ └── style.css ├── favicon.ico ├── grunt.js ├── humans.txt ├── img ├── index.html ├── js │ ├── main.js │ ├── plugins.js │ └── vendor │ ├── jquery-1.7.2.js │ ├── jquery-1.7.2.min.js │ ├── kinvey-js-0.9.1.js │ ├── kinvey-js-0.9.1.min.js │ └── modernizr-2.5.3.min.js ├── package.json ├── readme.md └── robots.txt
After you’ve written the app you have a bunch of useful build tasks available to you via customized grunt tasks made available from k5bp. These tasks automate the process of minifiying, concat’ing and whole bunch of other optimization tricks for your new web app.
$ k5bp help
Usage: k5bp [options] [task [task ...]] Available tasks the k5bp plugin provides (for a full list, type k5bp --help clean Wipe the previous build dirs copy Copies the whole staging(intermediate/) folder to output (publish/) one css Concats, replaces @imports and minifies the CSS files * docs grunt h5bp plugin documentation dom dom-based build system html Basic to aggresive html minification img Optimizes .png/.jpg images using optipng/jpegtran mkdirs Prepares the build dirs * rev Automate the hash renames of assets filename * server Start a custom static web server usemin Replaces references to non-minified scripts / stylesheets * Build targets: k5bp build:<target> default concat css min img rev usemin manifest text concat css min rev usemin manifest buildkit concat css min img rev usemin manifest html:buildkit basics concat css min img rev usemin manifest html:basics minify concat css min img rev usemin manifest html:compress For more information on the k5bp plugin, see https://github.com/h5bp/node-build-script/wiki For more information on grunt, see https://github.com/cowboy/grunt
See the tool in action with this codestre.am screencast.
With this tool and a few commands, you can be ready to support a production ready HTML5 app. As always we’re open to your your comments, questions and feedback.
Starting a new mobile project? Check out our mBaaS Savings Calculator for a price quote.