easy-html-generator
This gem is a powerful and easy to use web development tool that helps developing modern web sites by generating static html pages. It utilizes:
- CoffeScript a.k.a. Javascript
- Sass a.k.a. Css
- Haml a.k.a. Html
- ActionView for ruby haml templating comfort
- ~ 600 lines of code
It supports:
- Bootstrap for responsive and modern html layouts
- HeadJS for performance optimized resource loading
- Bower for javascript dependency management
- Grunt for javascript based task management
- Google Anlaytics tracking of pageclicks
- minimizing of coffee-, javascript-, sass-, css-, png- and jpg files
- per project generators and ruby/haml view helper
- shared generators, helpers, static-, sass- and image files
It is developed with:
It is based on:
- EasyHtmlCreator which was the fundament Dennis van de Hoef and me developed on.
Get started
At first you need Ruby and Bundler.
For specific generators install:
- OptiPng for png image minimizing
- JpegOptim for jpg image minimizing
- NodeJs to use bower and grunt https://www.npmjs.com/
- Bower to use bower
npm install -g bower
- Grunt to use grunt
npm install -g grunt-cli
Create a new workspace folder
mkdir my_workspace
cd my_workspace
Create a ruby Gemfile
touch Gemfile
Paste this into the Gemfile
source 'https://rubygems.org'
gem 'easy_html_generator'
Run in terminal
bundle install
ehg --init
ehg --create my_project
Now you should see the following folder structure with ls -alR
my_workspace
├── dist # the generated result will be stored here
└── src # the generation input is stored here
├── demo
├── my_project # this is a project and will be available via http://localhost:9292/my_project
│ ├── assets
│ │ ├── images # content will be copied to `dist/my_project/images`
│ │ ├── public # public content gets directly copied to `dist/my_project/`
│ │ ├── scripts # content will be copied to `dist/my_project/scripts`
│ │ └── styles # content will be copied to `dist/my_project/styles`
│ ├── lib
│ │ ├── generators # project specific generators
│ │ └── helper # project specific view helpers you can use in haml files
│ ├── project.yml # project specific generators config
│ └── views
│ ├── index.html.haml # the ham file for index.html
│ └── layout.haml # the layout file index.html will use
|
└── shared # shared content over all projects
├── assets # shared assets over all projects
│ ├── images
│ ├── public
│ ├── scripts
│ └── styles
│ └── mixins # here are css helpers for bootstrap and head js
├── lib
│ ├── generators # generators shared over all projects
│ └── helper # view helpers you can use in haml files
└── project.yml # if a project doesnt have a `project.yml` this config will be used
Now run
ehg --server
...and navigate your web browser to http://localhost:9292
After a short time of generating you should see a directory listening in your browser.
Usage Terminal
Usage: ehg [options]
-s, --server [HOST_AND_PORT] start the rack server, default: 0.0.0.0:9292
-g, --generate [PROJECT] generate one or all projects, default: all
-i, --init initialize ehg workspace
-c, --create [PROJECT] create a new project from template, default: demo
-h, --help Show this message
Usage Generators
There are several generators controlled by the project.yml
. If a project misses the project.yml the file my_workspace/shared/project.yml
will be loaded and looks like this:
paths:
src:
images: 'assets/images'
scripts: 'assets/scripts'
styles: 'assets/styles'
...
generators:
- structure:
enabled: true
- compile_coffee:
enabled: true
minimize: true
selector: '**/*.js.coffee'
- service_bower:
enabled: true
selector: 'bower.json'
target: 'lib'
...
Generators
Generators are processed the way they appear in the project.yml
. At the moment only one generator instance per project.yml
is allowed. Every generator has the property enabled
.
Basic-Generators
Structure
- operates on:
dist
- creates necessary dist folders
- config:
generators:
- structure:
enabled: true
Copy
- operates on:
dist
andsrc
- copies folder or files from dist to src per default
- supports
src://
anddist://
- config:
generators:
- copy:
enabled: true
dirs:
-
source: 'assets/styles'
target: 'styles'
selector: '**/*.css'
-
source: 'src://assets/scripts'
target: 'dist://scripts'
selector: '**/*.js'
Combine
- operates on:
dist
- combines merges files on dist per default
- supports
src://
anddist://
- config:
generators:
- combine
enabled: true
packages:
-
file: 'scripts/combined.js'
files:
- 'scripts/**/*.js'
-
file: 'dist://styles/combined.css'
files:
- 'src://styles/**/*.css'
Delete
- operates on:
dist
- deletes files or folders on dist per default
- supports
src://
anddist://
- config:
generators:
- delete
enabled: false
files:
- '*'
- 'src://bower_components'
Compile-Generators
Compile::Haml
- operates on:
dist
andsrc
- compiles haml files from src to html files in dist, supports partials, action view syntax and minimizing
- config:
generators:
- compile_haml:
enabled: true
minimize: true
default_layout: 'views/layout.haml'
selector: '**/*.html.haml'
renderer:
attr_wrapper: '"'
format: :html5
shared_helper_path: 'shared/lib'
Compile::Sass
- operates on:
dist
andsrc
- compiles sass files from src to css files in dist, supports shared mixins and minimizing
- config:
generators:
- compile_sass:
enabled: true
minimize: true
selector: '**/*.css.sass'
Compile::Coffee
- operates on:
dist
andsrc
- compiles coffee files from src to js files in dist, supports minimizing
- config:
generators:
- compile_coffee:
enabled: true
minimize: true
selector: '**/*.js.coffee'
Minimize-Generators
Minimize::Html
- operates on:
dist
andsrc
- minimizes src html files and copies to dist
- config:
generators:
- minimize_html:
enabled: true
selector: '**/*.html'
prefix_extension: ''
Minimize::Css
- operates on:
dist
andsrc
- minimizes src css files and copies to dist
- config:
generators:
- minimize_css:
enabled: true
selector: '**/*.css'
prefix_extension: '.min'
Minimize::Js
- operates on:
dist
andsrc
- minimizes src js files and copies to dist
- config:
generators:
- minimize_js:
enabled: true
selector: '**/*.js'
prefix_extension: '.min'
Minimize::Images
- operates on:
dist
andsrc
- minimizes src image files and copies to dist, uses Piet
- config:
generators:
- minimize_images:
enabled: true
selector: '**/*.{jpg,jpeg,png}'
options:
quality: 90
level: 3
verbose: true
Service-Generators
Service::Bower
- operates on:
dist
andsrc
- resolves my_workspace/bower.json and copies bower_components to target in dist
- config:
generators:
- service_bower:
enabled: true
selector: 'bower.json'
target: 'lib'
Service::Grunt
- operates on:
dist
- resolves my_workspace/Gruntfile.coffee and runs a task
- config:
generators:
- service_grunt:
enabled: true
selector: 'Gruntfile.coffee'
task: 'default'
Service::Analytics
- operates on:
dist
- appends google analytics code to selected html files
- config:
generators:
- service_analytics:
enabled: true
append_to_files:
- '**/*.html'
google:
enabled: true
code: "<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', '{GOOGLE_UA_ID}', 'auto');ga('send', 'pageview');</script>"
id: -1
Resources
- https://github.com/creative-workflow/easy-html-generator
- https://travis-ci.org/creative-workflow/easy-html-generator
- https://codeclimate.com/github/creative-workflow/easy-html-generator
- https://rubygems.org/gems/easy_html_generator
- http://www.rubydoc.info/gems/easy_html_generator
- https://github.com/dennisvandehoef/easy-html-creator
Authors
Contributing
Check out the Contributing Guidelines