静的サイトの構築に便利:MiddleMan

11180 ワード

HTML JavaScript Ruby CSS Ruby テキストリンク

静的サイトを構築する時に、

いちいち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の紹介でした。

Author And Source

この問題について(静的サイトの構築に便利:MiddleMan), 我々は、より多くの情報をここで見つけました https://qiita.com/mosson/items/4419f4b6a2ded7649f24

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

JavaインタフェースVS抽象メソッド

Javaスクリプト理論(基礎)