[Middleman 3] Middleman: 新規プロジェクトを始める

サンプルプロジェクトを作成してみます。

以下の続きです。

% middleman version
Middleman 3.2.2

Contents

middleman init

% mkdir test_middleman
% middleman init test_middleman

or

% middleman init test_middleman
      create  test_middleman/Gemfile
         run  bundle install from "."
Fetching gem metadata from http://rubygems.org/........
Fetching additional metadata from http://rubygems.org/..
Resolving dependencies...
Using i18n (0.6.9)
Installing multi_json (1.8.4)
Using activesupport (3.2.16)
Using bundler (1.5.0)
Using chunky_png (1.2.9)
Using coffee-script-source (1.7.0)
Using execjs (1.4.0)
Using coffee-script (2.2.0)
Using fssm (0.2.10)
Installing sass (3.2.14)
Using compass (0.12.2)
Using eventmachine (1.0.3)
Installing http_parser.rb (0.5.3)
Installing em-websocket (0.5.0)
Using ffi (1.9.3)
Using tilt (1.4.1)
Installing haml (4.0.5)
Using hike (1.2.3)
Bundler::GemNotFound: Could not find json-1.8.1.gem for installation
An error occurred while installing json (1.8.1), and Bundler cannot continue.
Make sure that `gem install json -v '1.8.1'` succeeds before bundling.
      create  test_middleman/.gitignore
      create  test_middleman/config.rb
      create  test_middleman/source/index.html.erb
      create  test_middleman/source/layouts/layout.erb
      create  test_middleman/source/stylesheets
      create  test_middleman/source/stylesheets/all.css
      create  test_middleman/source/stylesheets/normalize.css
      create  test_middleman/source/javascripts
      create  test_middleman/source/javascripts/all.js
      create  test_middleman/source/images
      create  test_middleman/source/images/background.png
      create  test_middleman/source/images/middleman.png

エラーが出ました。

Bundler::GemNotFound: Could not find json-1.8.1.gem for installation
An error occurred while installing json (1.8.1), and Bundler cannot continue.
Make sure that `gem install json -v '1.8.1'` succeeds before bundling.

bundler 1.5.0 のバグらしいので、バージョンを上げます。

% bundle -v
Bundler version 1.5.0
% gem search --remote bundler
*** REMOTE GEMS ***
asset_bundler (0.2.0)
assetbundler (0.0.0)
atd-asset_bundler (0.0.3)
bowline-bundler (0.0.4)
bundler (1.5.2)
    :
% gem install bundler
Fetching: bundler-1.5.2.gem (100%)
Successfully installed bundler-1.5.2
Parsing documentation for bundler-1.5.2
Installing ri documentation for bundler-1.5.2
Done installing documentation for bundler after 5 seconds
1 gem installed

もう一度、実行します。

% middleman init test_middleman
   identical  test_middleman/Gemfile
         run  bundle install from "."
Fetching gem metadata from http://rubygems.org/........
Fetching additional metadata from http://rubygems.org/..
Resolving dependencies...
Using i18n (0.6.9)
Using multi_json (1.8.4)
Using activesupport (3.2.16)
Using bundler (1.5.2)
Using chunky_png (1.2.9)
Using coffee-script-source (1.7.0)
Using execjs (1.4.0)
Using coffee-script (2.2.0)
Using fssm (0.2.10)
Using sass (3.2.14)
Using compass (0.12.2)
Using eventmachine (1.0.3)
Using http_parser.rb (0.5.3)
Using em-websocket (0.5.0)
Using ffi (1.9.3)
Using tilt (1.4.1)
Using haml (4.0.5)
Using hike (1.2.3)
Using json (1.8.1)
Using kramdown (1.3.1)
Using rb-fsevent (0.9.4)
Using rb-inotify (0.9.3)
Using rb-kqueue (0.2.0)
Using listen (1.3.1)
Using rack (1.5.2)
Using rack-test (0.6.2)
Using thor (0.18.1)
Using middleman-core (3.2.2)
Using sprockets (2.10.1)
Using sprockets-helpers (1.0.1)
Using sprockets-sass (1.0.2)
Using middleman-sprockets (3.2.0)
Using uglifier (2.4.0)
Using middleman (3.2.2)
Installing rack-livereload (0.3.15)
Installing middleman-livereload (3.1.1)
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
   identical  test_middleman/.gitignore
   identical  test_middleman/config.rb
   identical  test_middleman/source/index.html.erb
   identical  test_middleman/source/layouts/layout.erb
       exist  test_middleman/source/stylesheets
   identical  test_middleman/source/stylesheets/all.css
   identical  test_middleman/source/stylesheets/normalize.css
       exist  test_middleman/source/javascripts
   identical  test_middleman/source/javascripts/all.js
       exist  test_middleman/source/images
   identical  test_middleman/source/images/background.png
   identical  test_middleman/source/images/middleman.png

生成されたプロジェクトファイル

.
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts
    │   └── all.js
    ├── layouts
    │   └── layout.erb
    └── stylesheets
        ├── all.css
        └── normalize.css

Gemfile

Bundler で gem を管理しているとのこと。

Gemfile
# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'
gem "middleman", "~>3.2.2"
# Live-reloading plugin
gem "middleman-livereload", "~> 3.1.0"
# For faster file watcher updates on Windows:
gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]

config.rb

Middleman の設定ファイル。

config.rb
###
# Compass
###
# Change Compass configuration
# compass_config do |config|
#   config.output_style = :compact
# end
###
# Page options, layouts, aliases and proxies
###
# Per-page layout changes:
#
# With no layout
# page "/path/to/file.html", :layout => false
#
# With alternative layout
# page "/path/to/file.html", :layout => :otherlayout
#
# A path which all have the same layout
# with_layout :admin do
#   page "/admin/*"
# end
# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/)
# proxy "/this-page-has-no-template.html", "/template-file.html", :locals => {
#  :which_fake_page => "Rendering a fake page with a local variable" }
###
# Helpers
###
# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes
# Reload the browser automatically whenever files change
# activate :livereload
# Methods defined in the helpers block are available in templates
# helpers do
#   def some_helper
#     "Helping"
#   end
# end
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
# 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 :asset_hash
  # Use relative URLs
  # activate :relative_assets
  # Or use a different image path
  # set :http_prefix, "/Content/images/"
end

config.ru

--tack フラグの追加で雛形が生成される。

% middleman init test_middleman --rack
      create  test_middleman/config.ru
   identical  test_middleman/Gemfile
         run  bundle install from "."
Using i18n (0.6.9)
    :
Using middleman-livereload (3.1.1)
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
   identical  test_middleman/.gitignore
   identical  test_middleman/config.rb
   identical  test_middleman/source/index.html.erb
   identical  test_middleman/source/layouts/layout.erb
       exist  test_middleman/source/stylesheets
   identical  test_middleman/source/stylesheets/all.css
   identical  test_middleman/source/stylesheets/normalize.css
       exist  test_middleman/source/javascripts
   identical  test_middleman/source/javascripts/all.js
       exist  test_middleman/source/images
   identical  test_middleman/source/images/background.png
   identical  test_middleman/source/images/middleman.png
config.ru
require 'rubygems'
require 'middleman/rack'
run Middleman.server

これ以外に複数のプロジェクトテンプレートが用意されているようなので、次回試します。