Help us understand the problem. What is going on with this article?

HTML5 Boilerplate / jQuery / Backbone.js / RequireJS / Twitter Bootstrapの整った環境を1分でセットアップするには

More than 5 years have passed since last update.

こういうページを自動生成します。

スクリーンショット 2013-08-21 15.33.48.png

やっていることは 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つのステップに分かれます。

  1. yo
  2. bower + npm install
  3. grunt

それでは順番にやっていきましょう。

$ mkdir project
$ cd project
$ yo backbone

するとコンソールに以下のように表示されます。

Yeoman.png

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 !

Feel-Physics
今はHoloLensのアプリを開発しており、技術記事はすべてブログ( http://weed.nagoya )に書いています。以前はSwift、OpenCV+Python、JavaScript、Objective-Cを書いていました。
http://weed.nagoya
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした