静的サイトを構築する時に、
いちいちDocumentRootかえるのめんどくさいなぁ・・・
テンプレートエンジンが使えたらなぁ・・・
coffeescriptが使えたらなぁ・・・
scssが使えたらなぁ・・・
minifyまで自動でやってくれたらなぁ・・・
煩悩にまみれてます。
そんなことを解決してくれるのがMiddleManです。
インストール
$ [sudo] gem install middleman
基本コマンド
コマンドは以下です。
#=>よく使う
$ middleman init #=> サイト構造を作成します
$ middleman server #=> サーバーを起動します
$ middleman build #=> 最終出力します
$ middleman --help
middleman build [options] # Builds the static site for deployment
middleman extension NAME [options] # Create Middleman extension scaffold NAME
middleman init NAME [options] # Create new project NAME
middleman server [options] # Start the preview server
middleman upgrade # Upgrade installed bundle
middleman version # Show version
実践してみる
1.middleman init
$ cd [適当な場所]
$ middleman init my_site
# 略
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
create my_site/.gitignore
create my_site/config.rb
create my_site/source/index.html.erb
create my_site/source/layouts/layout.erb
create my_site/source/stylesheets
create my_site/source/stylesheets/all.css
create my_site/source/stylesheets/normalize.css
create my_site/source/javascripts
create my_site/source/javascripts/all.js
create my_site/source/images
create my_site/source/images/background.png
create my_site/source/images/middleman.png
ずらずらっとできました。
config.rb
# 略
# 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 :cache_buster
# Use relative URLs
# activate :relative_assets
# Compress PNGs after build
# First: gem install middleman-smusher
# require "middleman-smusher"
# activate :smusher
# Or use a different image path
# set :http_path, "/Content/images/"
end
コメントアウトを外すだけで、いろいろ設定できそうですね！！
他にも、
$ middleman init --help
Usage:
middleman init NAME [options]
Options:
-T, [--template=TEMPLATE] # Use a project template: default, html5, mobile, smacss
# Default: default
[--css-dir=CSS_DIR] # The path to the css files
[--js-dir=JS_DIR] # The path to the javascript files
[--images-dir=IMAGES_DIR] # The path to the image files
[--rack] # Include a config.ru file
[--bundler] # Create a Gemfile and use Bundler to manage gems
Create new project NAME
templateやrackは面白そうですね。
2.middleman server
1.の手順をそのままserverしてみます。
[working directory] $ middleman server
== The Middleman is loading
[Listen warning]:
Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback.
== The Middleman is standing watch on port 4567
リクエストを待っています。
ブラウザでlocalhost:4567にアクセスしてみると、
動いています。見られています。
ヘルプを見てみます。
$ middleman server --help
Usage:
middleman server [options]
Options:
-e, [--environment=ENVIRONMENT] # The environment Middleman will run under
# Default: development
-h, [--host=HOST] # Bind to HOST address
# Default: 0.0.0.0
-p, [--port=PORT] # The port Middleman will listen on
# Default: 4567
[--verbose] # Print debug messages
[--instrument=INSTRUMENT] # Print instrument messages
[--disable-watcher] # Disable the file change and delete watcher process
[--profile] # Generate profiling report for server startup
[--reload-paths=RELOAD_PATHS] # Additional paths to auto-reload when files change
Start the preview server
静的サイトの構築にはオーバーな感じですね。
今この状態でファイルを変更すると、
サーバーの再起動が必要なのでしょうか、と疑問に思ったのでやってみます。
source/index.html.erb
---
title: Welcome to Middleman
---
<div class="welcome">
<% 10.times do %>
<h1>MiddleMan is Watching</h1>
<% end %>
<p class="doc">
<%= link_to "Read Online Documentation", "http://middlemanapp.com/" %>
</p><!-- .doc -->
</div><!-- .welcome -->
MiddleMan is Watchingを10回繰り返すように変更しました。
アクセスすると、
長いので省略しますが、即時反映されています。便利。
coffeescriptやscssもリクエスト時に整形してくれます。
3.middleman build
2.で編集したら、最後はパブリッシュしたいのでbuildコマンドをうちます。
その前にヘルプを見てみます。
$ middleman build --help
Usage:
middleman build [options]
Options:
-c, [--clean] # Removes orphaned files or directories from build
-g, [--glob=GLOB] # Build a subset of the project
[--verbose] # Print debug messages
[--instrument=INSTRUMENT] # Print instrument messages
[--profile] # Generate profiling report for the build
Builds the static site for deployment
ふむふむ。
--verboseをつけてbuildします。
$ middleman build --verbose
== Reading: Local config
== Activating: sprockets
Loaded extensions:
== Extension: Middleman::Sprockets
== Extension: Middleman::Sprockets::Sass
== File Change: config.rb
== File Change: source/index.html.erb
== File Change: source/images/background.png
== File Change: source/images/middleman.png
== File Change: source/javascripts/all.js
== File Change: source/layouts/layout.erb
== File Change: source/stylesheets/all.css
== File Change: source/stylesheets/normalize.css
== Prerendering CSS
== Checking for Compass sprites
== File Change: source/images/background.png
== File Change: source/images/middleman.png
== Building files
== Request: /images/middleman.png
create build/images/middleman.png
== Request: /images/background.png
create build/images/background.png
create build/javascripts/all.js
create build/stylesheets/all.css
create build/stylesheets/normalize.css
== Request: /index.html
== Finishing Request: /index.html (0.0s)
create build/index.html
buildディレクトリが作られ、その中に静的サイトができました。
build/index.html
<body class="index">
<div class="welcome">
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<h1>Middleman is Watching</h1>
<p class="doc">
<a href="http://middlemanapp.com/">Read Online Documentation</a>
</p><!-- .doc -->
</div><!-- .welcome -->
</body>
さっきいじったところもしっかり反映されてますね。
というわけで、便利なgemの紹介でした。