こういうページを自動生成します。
やっていることは Yeomanのホームページに書かれていることと同じです。
用意しておくもの
- Node.js（
npmコマンドを使うため） - Ruby
- Compass gem（
gem install compass） - yo（
npm install -g yo） - bower（
npm install -g bower） - grunt（
npm install -g grunt） - generator-backbone（
npm install -g generator-backbone）
Yeomanは3つのステップに分かれます。
- yo
- bower + npm install
- grunt
それでは順番にやっていきましょう。
$ mkdir project
$ cd project
$ yo backbone
するとコンソールに以下のように表示されます。
Twitter BootstrapとRequireJSを入れるか？と聞いています。スペースキーでオン／オフできます。エンターキーで先へ進みます。すると以下のようなファイルが作られます。RailsのScaffoldのような感じです。
create .gitignore
create .gitattributes
create .bowerrc
create bower.json
create .jshintrc
create .editorconfig
create Gruntfile.js
create package.json
create app/images/glyphicons-halflings.png
create app/images/glyphicons-halflings-white.png
create app/styles/main.scss
create app/scripts/vendor/bootstrap.js
create app/404.html
create app/favicon.ico
create app/robots.txt
create app/.htaccess
create app/index.html
create app/scripts/main.js
invoke mocha:app
create test/index.html
create test/lib/chai.js
create test/lib/expect.js
create test/lib/mocha/mocha.css
create test/lib/mocha/mocha.js
create test/spec/test.js
次に、モジュールの依存関係を自動検出します。
$ bower install
すると、以下のように依存関係が調査されます。
bower cached git://github.com/jlong/sass-twitter-bootstrap.git#2.3.2
bower validate 2.3.2 against git://github.com/jlong/sass-twitter-bootstrap.git#~2.3.0
bower cached git://github.com/components/jquery.git#1.9.1
bower validate 1.9.1 against git://github.com/components/jquery.git#~1.9.0
bower cached git://github.com/jrburke/requirejs.git#2.1.8
bower validate 2.1.8 against git://github.com/jrburke/requirejs.git#~2.1.5
bower cached git://github.com/Modernizr/Modernizr.git#2.6.2
bower validate 2.6.2 against git://github.com/Modernizr/Modernizr.git#~2.6.2
bower cached git://github.com/jashkenas/underscore.git#1.4.4
bower validate 1.4.4 against git://github.com/jashkenas/underscore.git#~1.4.3
bower cached git://github.com/requirejs/text.git#2.0.10
bower validate 2.0.10 against git://github.com/requirejs/text.git#~2.0.5
bower cached git://github.com/jashkenas/backbone.git#1.0.0
bower validate 1.0.0 against git://github.com/jashkenas/backbone.git#~1.0.0
bower cached git://github.com/components/jquery.git#2.0.3
bower validate 2.0.3 against git://github.com/components/jquery.git#>=1.8.0
bower install requirejs-text#2.0.10
bower install jquery#1.9.1
bower install sass-bootstrap#2.3.2
bower install requirejs#2.1.8
bower install modernizr#2.6.2
bower install underscore#1.4.4
bower install backbone#1.0.0
これで必要なモジュールの一覧ができたので、インストールします。
$ npm install
すると五月雨のようにモジュールがインストールされていきます。ものすごく長いのでここでは割愛します。
終わったら app というフォルダを見てください。
$ cd app
$ ls -F
404.html images/ scripts/
bower_components/ index.html styles/
favicon.ico robots.txt
これで準備ができました。ただし、この時点でindex.htmlを開いてもBootstrapは当たっていません。 styles フォルダに入っているスタイルシートが未コンパイルのscssファイルだからです。
ではコンパイルしましょう。ちなみにこのとき自動的にMochaのテストが走ります。
$ cd ..
$ grunt
いろいろメッセージが出ますが、最後に行ったことのリストが費やした時間とともに表示されます。どんなことをやっているか少し見てみましょう。
Elapsed time
default 803ms
jshint:all 89ms
jst:compile 26ms
compass:dist 3s
compass:server 501ms
mocha:all 14s
compass:dist 1s
requirejs:dist 3s
imagemin:dist 297ms
concat:dist/scripts/vendor/modernizr.js 51ms
cssmin:dist 98ms
uglify:dist/scripts/vendor/modernizr.js 389ms
uglify:dist/scripts/main.js 3s
uglify:dist/bower_components/requirejs/require.js 361ms
copy:dist 26ms
usemin:html 66ms
usemin:css 11ms
Total 27s
Mochaのテストが走ったりscssをコンパイルしたりJSをUglifyしたりしているようです。
Gruntが終わると dist フォルダができます。
$ ls -F
Gruntfile.js bower.json node_modules/ test/
app/ dist/ package.json
$ cd dist/
$ ls -F
404.html images/ scripts/
bower_components/ index.html styles/
favicon.ico robots.txt
$ cd styles/
$ ls
d26f1ec4.main.css
CSSファイルが生成されていることがわかります。この時点でindex.htmlをブラウザで見ると、Twitter Bootstrapが当たっているのがわかります。
私は、ちょっと何をやっているのか全部把握できないのですが、一から書いていくよりも速く安全にひな形を作ることができそうです。
今回はBackbone.jsを使いましたが、例えばgenerator-angularとかgenerator-expressといった、いろいろなgeneratorがあるようなので、試してみてください。
あと、何か間違いがあれば編集リクエストをお願いします。
ブログやってます：PAPA-tronix !