easy-html-generator Build Status Code Climate Gem Version

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:

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:

Get started

At first you need Ruby and Bundler.

For specific generators install:

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 and src
  • copies folder or files from dist to src per default
  • supports src:// and dist://
  • 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:// and dist://
  • 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:// and dist://
  • config:
generators:
  - delete
      enabled: false
      files:
        - '*'
        - 'src://bower_components'

Compile-Generators

Compile::Haml

  • operates on: dist and src
  • 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 and src
  • 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 and src
  • 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 and src
  • minimizes src html files and copies to dist
  • config:
generators:
  - minimize_html:
      enabled: true
      selector: '**/*.html'
      prefix_extension: ''

Minimize::Css

  • operates on: dist and src
  • minimizes src css files and copies to dist
  • config:
generators:
  - minimize_css:
      enabled: true
      selector: '**/*.css'
      prefix_extension: '.min'

Minimize::Js

  • operates on: dist and src
  • minimizes src js files and copies to dist
  • config:
generators:
  - minimize_js:
      enabled: true
      selector: '**/*.js'
      prefix_extension: '.min'

Minimize::Images

  • operates on: dist and src
  • 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 and src
  • 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

Authors

Tom Hanoldt

Contributing

Check out the Contributing Guidelines