で、静的サイト制作環境つくってみました。

ながれはこう

$ git clone git@github.com:maki-t2nd/punch.git
$ npm install
$ grunt bower:install

という感じで作業環境を生成。
制作中は、

$ punch s

と、

$ grunt watch

を、両方走らせての作業。
このへん間違ってる気がします。

そして最後に、

$ punch g

で、静的ページをアウトプット。

以下メモです。

Punch

config.json

Punchの設定ファイル。
これを編集して振る舞いを変える。

server

• port : ポート指定

bundles

• stylesheet_bundle, javascript_bundleの設定をここでする
• all.cssとかは、punch s で制作中は出力されない。punch g すると出力される。

asset_bundling

• fingerprint : false で、生成されるcssやjsにユニークな数値を付与しない

plugins

• 各種プラグインをnpmで入れれる。そしてここに記述

generator

• skip_paths : $punch g 時に出力しないファイル・フォルダを指定できる

mustache

Punchのデフォルトのhtmlテンプレートはmustache。

• contensディレクトリにはサイトの構造に応じたjsonファイル
• Partialするファイルはカレントディレクトリのものが優先して読まれる
• mustacheファイルが存在しても、対になるjsonファイルが存在しないとページ生成されない
• mustacheファイルから生成しないとマルチバイト文字が文字化ける（cssとかtxtどうしよう

Grunt

Gruntでは、以下のタスクを。

• Bowerのインストールを制御
• compass
• ライブリロード

Gruntの設定は、Gruntfile.jsに書きます。

Bowerのインストール制御

Bowerのインストール制御には以下のエントリを参考に、grunt-bower-taskを使用してます。

compass

compassは最初単体でcompass w してたのですが、Gruntでやることに。
watchもしたいので、watchのも入れる。

ライブリロード

ライブリロードはgrunt-contrib-watchでできてるみたい。あまりよくわかってません。
htmlファイルに以下の記述が必要でした。

<script src="http://localhost:35729/livereload.js"></script>

Bower

Bowerは、上記のBower入門(応用編)を参考にbower.jsonとGruntfile.jsを設定。

bower.json

• exportsOverrideには、mainが設定されているライブラリ、且つ、mainがあればよいものは書かなくてもよい
• exportsOverrideのライブラリ名後に指定する、インストールディレクトリ？の記述は空でもよい。そうするとライブラリ名のディレクトリ以下に直接入る
• dependenciesにはbowerやgithubにないライブラリも登録できる。が、hoge/index.js のようにインストールされる

Gruntfile.js

• option:layoutは、いろいろ試した結果、byComponentにした

とまあ、

ひととおり静的にサイトを生成する環境はできましたが、結果、やってみたってだけって感じです。
これでいっこサイト作ってみましたが、なんかいまいちでした。

こういったツールは現在世の中にものすごくいろいろあり、日々なくなったり新しくできてたりしてます。
なにが正解っておそらくないと思うので、自身の制作における選択肢を広げる上で、今後もいろいろ検証していけたらなと思います。

現場からは以上です。

tag

npm

Punch

grunt

bower