html5 template engine with CoffeeScript, Compass, RequireJS. http://appleboy.github.io/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.
> html5-template-engine@1.0.0 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.
from https://github.com/appleboy/html5-template-engine
