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

$ 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 "livereload-start" task
... Starting Livereload server on 35729 ...

Running "connect:livereload" (connect) task
Starting connect web server on localhost:3000.

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

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

Deploy Web 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/

Clean Your Project

Using Makefile

$ make clean

Using GruntJS

$ ./node_modules/.bin/grunt clean

Test Your Project

Using Makefile

$ make test

Using GruntJS and Mocha test command

$ ./node_modules/.bin/grunt release && mocha --reporter spec

Author

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

machiko / html5-template-engine Goto Github PK