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

appleboy / html5-template-engine Goto Github PK