Grunt使おうと思ってcoffee, scssファイルなどの配置を調べた
ファイル配置に悩む
Gruntを使う時に
「.coffeeファイルや、.scssファイルをどこに置けばいいの？」
「ビルド後のファイルをどこに配置するのがいいの？」
って疑問に思っていたので調べてみた。
毎回悩んで適当に配置するより、良さそうな方法で決め打ちしちゃいたい。
Grunt Website
Gruntの使い方みるなら、Gruntのホームページ見るのがよいかと思って覗いてみる。
まずはgitで管理されているソースコード
% cd gruntjs.com
% tree -d
.
├── misc
├── src
│ ├── cdn
│ ├── fonts
│ ├── img
│ ├── js
│ │ └── vendor
│ │ └── lib
│ ├── less
│ │ └── bootstrap
│ ├── media
│ └── tmpl
│ ├── blocks
│ └── includes
└── tasks
└── lib
srcディレクトリにHTMLテンプレート(Jade), 画像, Less, etc..を全て突っ込んでいるようだ。
ビルドしてみる。
% npm install
% grunt
% tree -d -L 3
.
├── build
│ ├── api
│ ├── blog
│ ├── cdn
│ ├── css
│ ├── docs
│ ├── fonts
│ ├── img
│ └── js
│ └── vendor
│ └── lib
├── misc
├── node_modules
│ └── 多すぎるので略
├── src
│ ├── cdn
│ ├── fonts
│ ├── img
│ ├── js
│ │ └── vendor
│ │ └── lib
│ ├── less
│ │ └── bootstrap
│ ├── media
│ └── tmpl
│ ├── blocks
│ └── includes
└── tasks
└── lib
ビルドすると、/buildディレクトリが作成され、コンパイルやminifyなどもろもろの処理を行って生成された*.html, *.css, その他リソースなどを/buildディレクトリに放り込んでいく。
これによって、
- 作業やリソース配置はすべて
/srcディレクトリ以下で行う - デプロイは
/buildディレクトリ以下のすべてが対象
というシンプルな構成にできる、と。
Gruntfile.jsも参考になる。
Yeoman Website
GruntといえばYeomanだろう、という発想で覗いてみた。
YeomanのGruntfile.jsを見たところ、Gruntとほぼ同様。
/appディレクトリにHTMLテンプレート(Jekyll), 画像, CSS, JS, etc..を突っ込んで、ごにょごにょしたものを/distディレクトリに放り込む方式。
yo webapp
Yeoman使えば悩むことはなかった。
$ yo webapp
で、上記の構成が最初っから設定されている。 webapp以外のジェネレータでも似たような設定なんじゃなかろーか。
結論
ディレクトリ名の好みでいうと、ソースは/srcで、ビルドしたのは/distがいいな。
