Html5 Template Engine

Hint: New Slush generator Html5 web apps available

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).
• Support JavaScript test framework Mocha.
• Support streaming build system Gulp.
• Support browser-sync Keep multiple browsers & devices in sync when building websites.
• Support Terminal in Chrome Devtools.
• Support Minify PNG and JPEG images with image-min.

Installation

Please install node.js first (>0.10) and bower package manager

$ npm install -g bower
$ npm install

Start App

$ npm start

Excuting above command will output the following message.

> [email protected] start /home/xxxxx/html5-template-engine
> gulp

[13:25:09] Requiring external module coffee-script/register
[13:25:11] Using gulpfile /home/xxxxx/html5-template-engine/gulpfile.coffee
[13:25:11] Starting 'default'...
[13:25:11] Starting 'coffee'...
[13:25:11] Starting 'compass'...
[13:25:11] Finished 'coffee' after 253 ms
directory app/assets/css/
   create app/assets/css/main.css

[13:25:12] Finished 'compass' after 1.08 s
[13:25:12] Starting 'connect:app'...
[13:25:12] Finished 'connect:app' after 34 ms
[13:25:12] Finished 'default' after 1.2 s
[BS] Local: >>> http://localhost:3001
[BS] External: >>> http://172.168.0.122:3001
[BS] Serving files from: app

Open browser like chrome or firefox and enter http://localhost:1337 URL.

Release

Execute the following command will generate dist folder.

$ npm run release

Test

To test release process by following command.

$ npm test

Support Terminal in Chrome Devtools

If you’re on a Mac, just download this Chrome extension. Install it, and you good to go. No need to read any further.

If you’re not on a Mac, you can connect to your system’s terminal via Node.js proxy. It can be localhost or some other remote server.

$ npm install -g devtools-terminal $ devtools-terminal --config terminal.js

Please refer more detail information.

Support Gulp in Chrome Devtools

Please install chrome Gulp Devtools extension. An extension to run gulp task from chrome devtools.

Is gulp-devtools running?

• If not already installed, run npm install -g gulp-devtools
• Export gulp from your gulpfile.js by adding module.exports = gulp;
• Run gulp-devtools in a directory with a gulpfile!
• Re-open Chrome Dev tools, find the Gulp tab. Your gulp tasks should now be accessible from Chrome

Author

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