静的サイトジェネレータ「roots」を触ってみた

- by konitter

個人的にこういうのを仕事で使う機会はまずないんですけど、小規模な静的サイトをさくっと作る場合に、こういうのが扱えるスキルがあると制作者的には色々とモテるんじゃないかと思います。まあジェネレータにも種類はあるわけですが、今回は「roots」を取り上げます。

roots

roots公式サイトは以下から。

rootsとは?

rootsの特長を簡単に。公式サイトのを適当に訳しただけやけど。

  • インストールが超簡単
  • クリーンで最小限のテンプレート
  • Jade, Stylus, CoffeeScriptが使える
  • 高速なライブリロードを実装済み
  • むちゃくちゃ便利なrootsオリジナルのCSSヘルパーライブラリが使える
  • コマンド一発でHerokuにデプロイできる
  • コンパイル時にhtml, css, jsをminify
  • BOWERRequireJSでjsのコンポーネントを管理
  • シンプルで分かりやすいプラグインインターフェイスで機能を簡単に拡張できる

上記で挙げた特長に食指が動くなら一度使ってみたら良いかと思います。

インストール

以下のコマンドを叩くだけ。環境によってはsudoが要るかも。

$ npm install roots -g

rootsをインストールするには、Node.jsの環境が必要です。
Node.jsの環境が無い人はググるなりして入れてください。

インストールできたら以下でバージョン確認。

$ roots -v
1.0.4

コマンド

プロジェクトテンプレートの作成

$ roots new name

カレントディレクトリ内にnameというディレクトリ名でプロジェクトのテンプレートを作成します。

ファイルのコンパイル

$ roots compile

Jade, Stylus, CoffeeScriptのファイルをコンパイルして、html, css, jsをプロジェクトディレクトリ内のpublicフォルダに出力します。

ファイルの監視

$ roots watch

ファイルを更新すると自動的にコンパイルし、ローカルサーバーを起動して既定のブラウザーにプロジェクトサイトを開きます。すでにブラウザーで開いている場合は、ライブリロードします。

rootsをアップデート

$ roots update

rootsの新バージョンをインストールします。

BOWERでjsのコンポーネントを管理

$ roots js

例えば以下のコマンドを叩くとBOWER経由でjQueryの最新版をインストールします。
ダウンロードしたファイルは、assets/js/componentsにコンポーネント名でディレクトリ作って入れてくれます。

$ roots js install jquery

その他のコマンドについては公式サイトの「client-side js」のセクションを確認するか、ヘルプコマンド$ roots -hでヘルプを見てください。

開発の流れ

(1) プロジェクトテンプレートを作成する

$ mkdir app
$ cd app
$ roots new sample

適当にappというフォルダを作って移動し、roots newするとappの中にsampleというフォルダでプロジェクトテンプレートが作成されます。

sample
├─ .git
├─ assets
│  ├─ css
│  │  ├─ _settings.styl
│  │  └─ master.styl
│  ├─ img
│  │  └─ noise.png
│  ├─ js
│  │  ├─ _helper.coffee
│  │  ├─ main.coffee
│  │  ├─ pie.htc
│  │  └─ require.js
│  └─ favicon.ico
├─ views
│  ├─ _partial.jade
│  ├─ index.jade
│  └─ layout.jade
├─ app.coffee
└─ readme.md

ファル構成は上記のようになります。

cssはasstes内の.stylファイル、jsは.coffeeファイル、htmlは、views内の.jadeファイルを触ります。

(2) ローカルサーバーを起動する

デフォルトのプロジェクトテンプレートのまま、ローカルサーバーを起動してどんなものが表示されるか確認してみます。

$ roots watch
compilimg... done!
server started on port 1111

プロジェクトディレクトリで上記コマンドを叩くと、自動的にファイルがコンパイルされ、既定のブラウザーでhttp://localhost:1111/が開きます。

デフォルトのテンプレートの状態は以下の画面。

roots watch

デフォルトのポート「1111」から別のものに変更したければ、以下のようにします。
するとコンパイル後のページが、http://localhost:3000/で開きます。

$ port=3000 roots watch
compilimg... done!
server started on port 3000

(3) ファイルを更新してみる

(2)のローカルサーバーを起動した状態のまま、簡単にhtml部分を更新してみます。
html部分の更新はviewsフォルダ内のJadeで書かれた.jadeファイルを触ります。

viewsフォルダ内のindex.jadeを開き、一番下に以下のコードを追加して保存します。

p こんにちは!こんにちは!

すると自動でコンパイルが走り、ライブリロードで更新した内容が即時ブラウザー上に反映されます。

roots edit

(4) 静的ファイルを出力する

(2)の$ roots watchした時点で静的ファイルは出力されているのですが、静的ファイルの出力だけしたい場合は、以下のコマンドを叩きます。

$ roots compile
compilimg...
minifying & compressing...
done!

するとファイルのコンパイル・圧縮が行われ、静的ファイルがpublicフォルダに出力されます。
publicフォルダのファイル構成は以下のようになります。

sample
├─ .git
├─ assets
├─ public
│  ├─ css
│  │  └─ master.css
│  ├─ img
│  │  └─ noise.png
│  ├─ js
│  │  ├─ main.js
│  │  ├─ pie.htc
│  │  ├─ templete.js
│  │  └─ require.js
│  ├─ favicon.ico
│  └─ index.html
├─ views
├─ app.coffee
└─ readme.md

まとめ

以上「roots」の機能を簡単に説明しましたが、DB使うほどでもないようなサイトならこういうジェネレータを使う、というのが海外では浸透してきていて、そして日々新しいジェネレータが開発されています。

「このジェネレータしか扱えません」じゃダメで、どのジェネレータを使うのかは、その時々の状況でより良いものを選べばいいんじゃないでしょうか。