[Middleman 3] Middleman: 付属するプロジェクトテンプレートと独自テンプレートの追加

付属テンプレートが生成するファイルと、独自テンプレートの追加方法を確認します。

以下の続きです。

% middleman version
Middleman 3.2.2

付属プロジェクトテンプレート

いくつかのプロジェクトテンプレートが用意されている。

  • default
  • html5
  • mobile
  • smacss
  • empty
% middleman init --help
Usage:
  middleman init NAME [options]
Options:
  -T, [--template=TEMPLATE]      # Use a project template: default, html5, mobile, smacss, empty
                                 # 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
      [--skip-gemfile]           # Don't create a Gemfile
  -B, [--skip-bundle]            # Don't run bundle install
      [--skip-git]               # Skip Git ignores and keeps
Create new project NAME

default

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

html5

HTML5 Boilerplate

% middleman init test_middleman_html5 --template=html5
test_middleman_html5
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── 404.html
    ├── LICENSE.md
    ├── README.md
    ├── apple-touch-icon-114x114-precomposed.png
    ├── apple-touch-icon-144x144-precomposed.png
    ├── apple-touch-icon-57x57-precomposed.png
    ├── apple-touch-icon-72x72-precomposed.png
    ├── apple-touch-icon-precomposed.png
    ├── apple-touch-icon.png
    ├── crossdomain.xml
    ├── css
    │   ├── main.css
    │   └── normalize.css
    ├── favicon.ico
    ├── humans.txt
    ├── img
    ├── index.html.erb
    ├── js
    │   ├── main.js
    │   ├── plugins.js
    │   └── vendor
    │       ├── jquery-1.8.0.min.js
    │       └── modernizr-2.6.1.min.js
    ├── layouts
    │   └── layout.erb
    └── robots.txt

mobile

Mobile Boilerplate

% middleman init test_middleman_mobile --template=mobile
test_middleman_mobile
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── 404.html
    ├── README.markdown
    ├── crossdomain.xml
    ├── css
    │   └── style.css
    ├── humans.txt
    ├── img
    │   ├── h
    │   │   ├── apple-touch-icon.png
    │   │   └── splash.png
    │   ├── l
    │   │   ├── apple-touch-icon-precomposed.png
    │   │   ├── apple-touch-icon.png
    │   │   └── splash.png
    │   └── m
    │       └── apple-touch-icon.png
    ├── index.html
    ├── js
    │   ├── libs
    │   │   ├── modernizr-custom.js
    │   │   └── respond.min.js
    │   ├── mylibs
    │   │   └── helper.js
    │   ├── plugins.js
    │   └── script.js
    ├── robots.txt
    ├── sitemap.xml
    ├── test
    │   ├── index.html
    │   ├── qunit
    │   │   ├── qunit.css
    │   │   └── qunit.js
    │   └── tests.js
    └── tools
        ├── googleanalyticsformobile
        │   ├── Readme.PDF
        │   ├── aspx
        │   │   ├── aspx1.snippet
        │   │   ├── aspx2.snippet
        │   │   ├── ga.aspx
        │   │   └── sample.aspx
        │   ├── jsp
        │   │   ├── ga.jsp
        │   │   ├── jsp1.snippet
        │   │   ├── jsp2.snippet
        │   │   └── sample.jsp
        │   ├── php
        │   │   ├── ga.php
        │   │   ├── php1.snippet
        │   │   ├── php2.snippet
        │   │   └── sample.php
        │   └── pl
        │       ├── ga.pl
        │       ├── perl1.snippet
        │       ├── perl2.snippet
        │       └── sample.pl
        ├── mobile-bookmark-bubble
        │   ├── COPYING
        │   ├── bookmark_bubble.js
        │   ├── example
        │   │   ├── example.html
        │   │   └── example.js
        │   └── images
        │       ├── arrow.png
        │       ├── close.png
        │       ├── generate_base64_images
        │       └── icon_calendar.png
        └── wspl
            ├── README
            ├── databasefactory.js
            ├── dbworker.js
            ├── dbworker_test.html
            ├── dbworkerstarter.js
            ├── dbwrapper_gears.js
            ├── dbwrapper_gears_test.html
            ├── dbwrapper_html5.js
            ├── dbwrapper_html5_test.html
            ├── dbwrapperapi.js
            ├── dbwrapperapi_test.html
            ├── gears_resultset.js
            ├── gears_resultset_test.html
            ├── gears_transaction.js
            ├── gears_transaction_test.html
            ├── gearsutils.js
            ├── gearsutils_test.html
            ├── global_functions.js
            └── simplenotes
                ├── index.html
                ├── simplenotes.js
                ├── styles.css
                └── template.js

smacss

SMACSS

% middleman init test_middleman_smacss --template=smacss
test_middleman_smacss
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── _footer.haml
    ├── index.html.haml
    ├── layouts
    │   └── layout.haml
    └── stylesheets
        ├── base
        │   ├── README.markdown
        │   ├── base.scss
        │   └── normalize.scss
        ├── layout
        │   └── README.markdown
        ├── modules
        │   └── README.markdown
        ├── states
        │   └── README.markdown
        └── style.css.scss

empty

empty

% middleman init test_middleman_empty --template=empty
test_middleman_empty
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source

独自のプロジェクトテンプレートを追加する

~/.middleman にカスタムテンプレートのスケルトンを入れると、--template=foo フラグで指定できるようになるよう。

有志の開発したテンプレートも、ここに設置するよう指示されていました。