読者です 読者をやめる 読者になる 読者になる

jekyllのテンプレート的なの

最近jekyllがマイブームなので自分で使うようのテンプレート作ってみた。
https://github.com/hokaccha/jekyll-template

SassのコンパイルとJSのコンパイルをやるjekyllのプラグインつくったので

$ jekyll

だけでHTML、JS、Sassをコンパイルしてくれるのがポイント。

Sass(というかscssだけど)はソースの場所と出力の場所だけ指定すればOK

scss:
  source: _src/_scss
  destination: css

これで _src/_scss/hoge.scss とかは htdocs/css/hoge.css になって出力される。_(アンスコ)から始まるscssファイルはsassコマンドのwatchと同じく無視するようにしてる(watchの対象にはなる)。sassコマンドでいうと

$ sass --watch _src/_scss:htdocs/css

ってやってるのと同じ(たぶん)。

JSのコンパイルは依存関係があるのでつなげる順番を設定ファイルにこんな感じで書く。

js:
  source: _src/_js
  destination: js
  targets:
    script.js:
      min: script.min.js
      files:
        - model.js
        - view.js
        - main.js
    lib.js:
      files:
        - lib/jquery.min.js
        - lib/underscore-min.js
        - lib/backbone-min.js

filesのファイルを順番につなげて出力する。minが指定してあればuglifierでminifyする。uglifierは最初のコメント以外のコメント削るのでライセンスが必要なライブラリ系はすでにminifyされてるやつをつなげるだけにしてる。

テストはmochaを入れてる。

セットアップとか

gemのモジュールインストールするのにbundlerだけ必要なので入ってない場合は入れとく。

$ gem install bundler

そんでcloneするなりtarball落としてくるなりして手元に持ってきたら

$ bundle install

で必要なモジュールが入る。カレントディレクトリにモジュール入れたい
なら--pathでパス指定する(その場合はjekyllのコマンドをbundle execする)

次に、

$ rake setup

jQueryとかBackbone.jsの最新版をダウンロードできる。この辺はRakefileに書いてるので他に必要なライブラリとかがあったら適当にここを変更すればOK
https://github.com/hokaccha/jekyll-template/blob/master/Rakefile

これでセットアップ終わりで

$ jekyll

でhtdocsにファイルが出力されれば成功。

$ jekyll --auto --server

これでwatchしつつサーバーが立ち上がる。

ちなみにgithub pagesで使うときのことはあんまり考えてない(プラグイン使えないので)。