Vinay M

#02-06 Silahis Apartments
121 Lorong K Telok Kurau
Singapore - 425762

Please send us a message and
we will get back to you within 1-2 working days.

Middleman and Front-end Development

Posted by on 13 July 2012 in , Read Later

Middleman is a ruby gem for front-end developers, basically a static html site generator, which can turbo-charge your development process. Middleman provides all the ruby goodness such as templating languages, cache busting, relative assets, minification and compression. You can even use third party ruby-gems to further help you.

I have had the chance to use Middleman on a recent project and i will pen down my experience with it. I use

  • Less as my css engine
  • Erb templating

Please noted that i am using a mac, terminal, RVM (ruby 1.9.2) and middleman 3.0

Setup and Installation

gem install middleman

Initializing a Project

Once middleman is installed, use terminal to "cd" to your work folder.

middleman init project_name

This will create a folder named "project_name". In it you will find config.rb, Gemfile and a source folder.

Using custom templates with middleman

You can use html5 boilerplate template or a custom template using the -t flag. Custom template should be placed in ~/.middleman/

middleman init project_name -t=html5  

Getting to Work

First things first, all your development process is from the "source" folder. Get the server up and running using

bundle exec middleman server

This will install any gems and start the server http://0.0.0.0:4567/

Getting Less to Work with Middleman

Middleman has tilt templating engine which enables to run most of the templating languages such as (.less, .liquid, sass, scss, haml). To install less, add the following in your Gemfile (which is located in the root folder of your project)

source :rubygems

gem "middleman", "~>3.0.0"

gem "therubyracer" #Less dependency
gem "less"

Next open the terminal

bundle install #Installs less

Once less is installed, you can add less files in the stylesheets folder of your source. And call them in your html files using

<%= stylesheet_link_tag "site", {:rel=>"stylesheet", :media=>"all"} %>

#This file is located at source/stylesheets/site.css.less. You do not have to add rel="stylesheet/less"

Back to Html

The source folder of your project will have a layout.erb in the 'layouts/' directory. This is the master template for your project.

index.html.erb is the index page of your project. If you want to add a new page say 'abc.html', you can create abc.html.erb and access via the server using 'http://0.0.0.0:4567/abc.html'

If you are a haml guy like me, you can create abc.html.haml

More info about Partials and templating can be found here http://middlemanapp.com/templates/templates-layouts-partials/

Build - ready for Hand-over

Once you have completed development in the source folder, you need to build the project to create static html-only files which you can pass it to the client.

Open up your config.rb file, scroll through and look at all the available options. My usual build setup in config file is

# Change the CSS directory
set :css_dir, "assets/css"

# Change the JS directory
set :js_dir, "assets/js"

# Change the images directory
set :images_dir, "assets/img"

# Build-specific configuration
configure :build do
  # For example, change the Compass output style for deployment
  #activate :minify_css

  # Minify Javascript on build
  #activate :minify_javascript

  # Enable cache buster
  activate :cache_buster

  # Use relative URLs
  activate :relative_assets

  # Compress PNGs after build (Add gem "middleman-smusher" to the Gemfile to install)
  activate :smusher

  # Or use a different image path
  # set :http_path, "/Content/images/"
end

Open terminal and in your project folder, type

middleman build

This will create a build directory in your project root folder with all html files, css and optimized images. I usually dont use middleman smusher (yahoo smushit), rather use Imageoptim

And thats it, build process complete and zip up the build folder and send it to client or use git to push it.

Useful Links

Alternatives