定食屋おろポン

おろしポン酢と青ネギはかけ放題です

Grunt使おうと思ってcoffee, scssファイルなどの配置を調べた

ファイル配置に悩む

Gruntを使う時に 「.coffeeファイルや、.scssファイルをどこに置けばいいの?」 「ビルド後のファイルをどこに配置するのがいいの?」 って疑問に思っていたので調べてみた。

毎回悩んで適当に配置するより、良さそうな方法で決め打ちしちゃいたい。

Grunt Website

gruntjs/gruntjs.com · GitHub

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

yeoman/yeoman.io · GitHub

GruntといえばYeomanだろう、という発想で覗いてみた。

YeomanのGruntfile.jsを見たところ、Gruntとほぼ同様。

/appディレクトリにHTMLテンプレート(Jekyll), 画像, CSS, JS, etc..を突っ込んで、ごにょごにょしたものを/distディレクトリに放り込む方式。

yo webapp

Yeoman使えば悩むことはなかった。

$ yo webapp

で、上記の構成が最初っから設定されている。 webapp以外のジェネレータでも似たような設定なんじゃなかろーか。

結論

ディレクトリ名の好みでいうと、ソースは/srcで、ビルドしたのは/distがいいな。