JavaScript (HTML5): Middleman 導入

Middleman とは

Middleman とは静的なサイトのジェネレータです。
Yeoman と役割は似ていますが、静的なサイトを構築するのに特化されており、ウェブデザイナー、コーダーにはこちらの方がオススメかも。

Middleman のインストール

gem でインストールします。

$ [sudo] gem install middleman

Middleman プロジェクトの作成

$ middleman init hello_world

hello_world スケルトンが作成されます。

.
├── 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

このとき –template オプションを付けるとサイトテンプレートの種類を変える事ができます。

middleman init my_new_mobile_project --template=html5
middleman init my_new_mobile_project --template=smacss
middleman init my_new_mobile_project --template=mobile

–template=html5 だと boilerplate template が使われます。

gem がたりないよーというエラーが出たら、sudo を付けて

sudo gem install eventmachine -v '1.0.3'

というように指定するか、

sudo bundle install

を打つとイケると思います。

Middleman サーバーの起動

ブラウザで起動を確認するには作成したディレクトリに移動して server コマンドを打ちます。

cd hello_world
bundle exec middleman server

ちなみに server コマンドを省いて

bundle exec middleman

でも同じ動作になります。

http://0.0.0.0:4567/ あたりで動作しているのを確認できます。

サイトのビルド

最終的にリリース用にサイトを js/css の圧縮などビルドするには build コマンドを打ちます。

bundle exec middleman build

build フォルダができ、リリース用のファイルが生成されます。