Html5 Template Engine

Features

• The latest html5boilerplate.com source code.
• Includes Normalize.scss v2.1.x and v1.1.x.
• The latest jQuery and Modernizr via Bower package manager.
• Support CoffeeScript, RequireJS, Compass, html minification (via htmlcompressor).
• A lightweight web server listen to 3000 port (Using Node Express Framework).
• Support JavaScript Task Runner GruntJS
• Support JavaScript test framework Mocha

Install develop tool

$ ./build/build.sh

or

$ curl https://raw.github.com/appleboy/html5-template-engine/master/build/build.sh | bash

Setup Environment

Download source code.

$ git clone https://github.com/appleboy/html5-template-engine.git

Install vendor library and npm library.

$ npm install
$ bower install

Develop a project manually

Use Compass CSS Framework

Compass is an open-source CSS Authoring Framework. http://compass-style.org/

$ compass watch .

Use CoffeeScript

CoffeeScript is a little language that compiles into JavaScript. http://coffeescript.org/

$ coffee -b -w -c -o assets/js assets/coffeescript

Minify Javascript using RequireJS

Using Makefile.

$ make

or command line.

$ r.js -o build/self.build.js

Testing minified javascript file. Please modify index.html and find the following text.

<script data-main="assets/js/main" src="assets/js/vendor/requirejs/require.js"></script>

Replace with:

<script data-main="assets/js/main-built" src="assets/js/vendor/requirejs/require.js"></script>

Run local server (use root permission)

$ node build/server.js

Using Makefile.

$ make server

open the following URL on browser.

http://your_host_name:4000/

Develop a project automatically

Before using GruntJS tool, please make sure excute the following command.

$ npm install

Using GruntJS tool to setup develop environment.

$ ./node_modules/.bin/grunt

You will get the following messages.

Running "init" task
Initial project

Running "express:dev" (express) task
Starting background Express server
Server listening on http://localhost:4000

Running "livereload-start" task
... Starting Livereload server on 35729 ...

Running "regarde" task
Watching app/**/*.{html,htm}
Watching app/**/*.scss
Watching app/**/*.css
Watching app/**/*.js
Watching **/*.coffee

Please install livereload plugin depend on your browser. ex: Safari extension, Firefox addon, or Chrome extension

Deploy Your App

Using Makefile

$ make release

or defined your build output path. (default: output)

$ make -m output_path=output2 release

Using GruntJS

$ ./node_modules/.bin/grunt release

Copy output folder to your root document path.

$ cp -r output /var/www/html5

open the following URL on browser.

http://your_host_name/html5/

Test Your Project

Using Makefile

$ make test

Using GruntJS

$ ./node_modules/.bin/grunt test

Clean Your Project

Using Makefile

$ make clean

Using GruntJS

$ ./node_modules/.bin/grunt clean

Author

Bo-Yi Wu, Twitter: @appleboy, Blog: http://blog.wu-boy.com