node.js + expressにtwitter bootstrapを導入してみる

node.js + expressにtwitter bootstrapを導入しようと、ぐぐったのですが以外に載っていなかったのでやり方をまとめました。

まずexpressコマンドを使用してプロジェクトを作成します。

express -c less projectName

ここで注目すべき点は「-c less」ですね。
これはCSSに関してlessを使用しますよ！という内容です。
オプションを指定することで、簡単に初期のファイルをそれ用に合わせてくれます。
他にも以下の様なオプションがあります。

option	英文説明	適当に翻訳
-h, --help	output usage information	help表示
-V, --version	output the version number	version表示
-s, --sessions	add session support	sessionを使えるようにする。
-e, --ejs	add ejs engine support (defaults to jade)	htmlのテンプレートエンジンをejsにする。デフォルトはjade
-J, --jshtml	add jshtml engine support (defaults to jade)	htmlのテンプレートエンジンをjshtmlにする。デフォルトはjade
-H, --hogan	add hogan.js engine support	hogan.jsを入れる。（なんだろねこれ）
-c, --css	add stylesheet support (less stylus) (defaults to plain css)	スタイルシートのテンプレートエンジンを変更する。使えるエンジンはless stylus。デフォルトは普通のCSS
-f, --force	force on non-empty directory	なんだろこれ誰か教えて

忘れるんでメモっときます。

あとは作成したプロジェクトに移動して「npm install」とコマンドし必要なmoduleを入れちゃって下さい。

twitter bootstrapをDLしてくる。

今回はlessからの使用を考えているので、GitHubから必要ファイルを落としてきます。
ディレクトリ構成が重要なので、自分のやり方を書いておきます。

自分は基本的に全て「bootstrap」というディレクトリを作成して、その中にtwitter bootstrapのファイルを入れます。
画像関連
public/images/bootstrap/glyphicons-halflings-white.png
public/images/bootstrap/glyphicons-halflings.png

JavaScript
public/javascripts/bootstrap/bootstrap-alert.js
public/javascripts/bootstrap/bootstrap-button.js
public/javascripts/bootstrap/bootstrap-carousel.js
…（jsファイルは全て）

スタイルシート
public/stylesheets/bootstrap/accordion.less
public/stylesheets/bootstrap/alerts.less
public/stylesheets/bootstrap/bootstrap.less
…（lessファイルは全て）

パスを整える。

やることは２点です。

1. override用のlessを準備します。
2. このままではCSSからの画像読み込みのバスなどがおかしいので修正を行います。

1に関しては好みだと思いますが、bootstrapの背景色や文字色を変更する際、bootstrapのlessを変更するのではなく、overrideで色などを調整します。

2に関しては、やらないとアイコンが見れないので、必ず行います。
早速作ったoverride.lessを利用します。

public/stylesheets/override.lessを準備し、その中に以下の内容を記載します。

//bootstrapをimportします。
@import "./bootstrap/bootstrap.less";

//画像のパスを変更します。
@iconSpritePath:          "../images/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../images/bootstrap/glyphicons-halflings-white.png";

これでだいたい準備完了です。

最後にlessを読み込みます。

layout.jadeにlessを読み込ませてみます。

    link(rel='stylesheet', href='/stylesheets/override.css')

cssと書けば勝手にlessをコンパイルしてくれます。

あとは、jadeをゴリゴリいじりながらデザインを調整するだけです。

あとがき

今回はtwitter bootstrapを導入してみました。
作業的には5分ほどで完了します。
bootstrap用のnpmなどもあるみたいですので、そちらを導入してもいいかもしれません。
自分の場合はexpressでプロジェクトを作成してからbootstrapを導入したので、上記のまどろっこしいやり方をしました。

非常に簡単に出来ますので、みなさまも挑戦してみて下さい！
以上