やったことだけ書く備忘録

Middlemanを試してみた

最近は開発環境というか、ツール系をまとめてインストールしてスケルトンを作ってくれるものがたくさんありますが、Middlemanを試してみたのでメモ。本当に導入だけですが…。

Middlemanとは


効率的な作業を可能にする Ruby 製の静的サイト生成ツールとのことです。
@yterajimaさんが日本語化されてるのは知っていたのでこれは使わねば!という感じです。
いやはや、こうやって日本語化されてる方々には本当に頭が上がりませんね。

本家と日本語サイトは以下です。




Middleman: Hand-crafted frontend development(本家サイト)


Middleman: 効率的な作業を可能にする Ruby 製の静的サイト生成ツール(日本語サイト)




こういったツールには他にもNode.jsで動く「yeoman」がありますが、こちらはインストールに際してSassやらCompassを別でインストールしないといけなかったりで(言語自体が別なので仕方ないですが)、わりとインストールに手間取った記憶があります。特にPhantomJSのインストールがめちゃ長いとか。

その点、MiddlemanはRuby製なのでその当たりも一括して入れてくれるのでラクですね。Macな方は始めからRubyがあるのではじめるのにちょうどいいと思います。



以下は日本語サイトを参考に、インストールからプロジェクト作成、LiveReloadの設定までやってみます(実はLiveReloadをやってみたかったんです…)



インストール


gemから簡単にインストールできます。



gem install middleman
 


これは楽チンですねー。



プロジェクトの作成


作業用のディレクトリでinitコマンドを発行するだけで雛形を作ってくれるようです。



# sample_projectという名前のプロジェクトを作成
middleman init sample_project
 





ファイルセットが作成されました。おぉ、normalize.cssをデフォルトでバンドルしてるんですね。これはいい感じ。



サーバを起動してブラウザからアクセス


あとは作成されたプロジェクトディレクトリに移動して、サーバを起動します。



middleman server
 





おや、「rb-inotifyがないよ」って言われてますね。Linuxだからでしょうか…。LiveReloadで使うんでしょうね。この辺りは後で設定するとして、「http://0.0.0.0:4567でwatchしたよ」ということなので、http://localhost:4567にアクセス。するとスタートページみたいなのが表示されれば動作確認ですね。




LiveReloadを試してみる


これがやってみたかった!ということで設定します。さっきのrb-inotifyも一緒に入れるので、Gemfileに記述。



gem 
"middleman""~>3.0.12" // これは始めから記述されている
gem "rb-inotify""~>0.9"
gem "middleman-livereload""~>3.0.1"
 

で、bundle install。あとは、livereloadを有効にするように、config.rbにも記述します。



activate 
:livereload
 

config.rbにも色々設定項目がありますね。JSとかCSSのディレクトリ名の設定とかもここでできるみたいです。



LiveReloadしてみる


ここまで設定したら、再度サーバを起動します。






LiveReload is waiting for a browser to connect とありますので、起動してますね!あとはブラウザ側でChromeのExtensionなり、Firefoxのadd-onなりを準備しておけば、編集の度にオートリロードがかかりました。これは便利すぎてヤバイ。



ビルドもしてみる


せっかくなので、ビルドしてみます。



middleman build
 





静的ファイルが生成されます。index.erbがindex.htmlになって生成されるみたいですね。とりあえず、今回はここまで。



感想等


かなーり久々に静的なコーディングをする機会があったので、次からは導入を決めました。動的なサイトもLiveReloadできるようになるといいなーと思いましたけど、「静的サイト生成ツール」と言ってるので難しいかもしれないですね( ´ω`)

« 前の記事 次の記事 »

4件のコメント

Samrat さん

Your's is the ingenlitelt approach to this issue.

Jenay さん

Tonodhcwu! That's a really cool way of putting it!

Sticky さん

Well maadacmia nuts, how about that. http://fkyfinlosu.com [url=http://hskiourmgy.com]hskiourmgy[/url] [link=http://sggqjmb.com]sggqjmb[/link]

osamerimuyi さん

http://dutasterideavodartonline.org/ - dutasterideavodartonline.org.ankor <a href="http://online-purchaselevitra.net/">online-purchaselevitra.net.ankor</a> http://20mg-cheapest-pricelevitra.net/

コメントを投稿する

 画像に表示されている文字を入力してください。