YOってあのYO?
例の通知が止まらなくなるYOではありません。
Yeomanと呼ばれる、node.js製のプロジェクトのテンプレートを生成できるツールです。
まずは導入
yoコマンドを使用する準備をします。
$ npm install -g yo bower grunt grunt-cli
yo -vしてみましょう。バージョン情報が表示されましたか？
早速実践
$ yo
yoコマンドを実行すると、メニューが出てきます。
キーボードの上下で操作をすることが出来るので、Install a generatorを選びましょう。
[?] 'Allo tarosa! What would you like to do?
‣ Install a generator
Find some help
Get me out of here!
webappで検索をし、generator-webappを探して下さい。
これで、webappと呼ばれるyoのプラグインを導入することができます。
このように、Yeomanは、プラグインとして提供されているひな形を使用するためのツール群となっています。
I just installed your generator by running:
npm install -g generator-webapp
[?] 'Allo tarosa! What would you like to do? (Use arrow keys)
‣ Run the Webapp generator (0.4.9)
Run the Mocha generator (0.1.3)
Update your generators
Install a generator
Find some help
Get me out of here!
Installが終わったみたいですね。何か失敗したような画面が出た場合は、nodeのバイナリが置いてあるフォルダの位置などをもう一度確認してトライしてみてください。
早速webappを使ってみましょう。
Run the Webapp generator (0.4.9)を実行
Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo webapp
_-----_
| |
|--(o)--| .--------------------------.
`---------´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
[?] What more would you like? (Press <space> to select)
‣⬢ Bootstrap
⬡ Sass
⬡ Modernizr
ここは人それぞれなのですが、私はBootStrapとSassを使うので、Spaceキーを押して⬢にします。必要なのを選んだらエンターキーで実行されます。
すると、必要なモジュールが書いてあるpackage.jsonとbower.jsonが自動的に実行されて、必要なモジュールがDLされます。
しばらくログが沢山流れるとともに、時間も流れるのでスタバで作業している方はデキる風にドヤ顔しながらコーヒーのおかわりを取りに行きましょう。
終わりましたか？
もしかしたら導入に失敗しているかもしれないので、
$ npm install
$ bower install
とでもやっておくと良いかもしれません。ここでエラーログなどが出なかったら導入完了です。
快適な環境を享受する
それでは、快適なコーディング環境を実際に使ってみましょう
$ grunt serve
上手く行けば、ﾀﾞｧｰｰｯとログが流れて、ファイルの監視状態になります。
ここでlocalhost:9000を開くと、なにやらHTTPサーバーが立っているようになります。
ここでappフォルダを見ると、いかにもなフォルダ構成になっているかと思います。
$ tree
.
├── 404.html
├── favicon.ico
├── images
├── index.html
├── robots.txt
├── scripts
│ └── main.js
└── styles
└── main.scss
ここで、何らかのファイルを書き換えてみましょう。
先ほどのコンソールの画面で何か動きましたか？
ブラウザに表示されているHTMLなどのコード一式はdistフォルダーにコピーされたり、自動的に圧縮されて配置されています。
これらはGruntfile.jsに書かれており、先ほどのgrunt serveはビルドしたコード一式をHTTPサーバ経由で確認できる機能です。
ビルドのみを行いたい場合はgrunt buildで行えます。
さらに、ブラウザ側がlivereloadに対応していれば、コードを書き換えると自動的にブラウザが再読み込みされて快適に変更点を確認することができます。
小技
これをVPSで試していた方もいるかと思います。
grunt serveのログにlocalhost:9000を開け！って書いてあるのに開けない…なんてことになってイライラがマッハになっていたかと思います。
実は、gruntのconnect機能は指定したアドレスからポートにアクセスしないと開けないようになっています。
そこで、Gruntfile.jsを編集して、VPSでも動くように修正してみましょう。
77行目あたりにconnectの項目があり、localhostと書かれているかと思います。
それを、0.0.0.0に書き換えます。
これは何を指しているかと言うと、どのドメインからアクセスしてきても、ポート番号があっていればOKと言った意味で(厳密には違うけど)
これでVPSで実行していればスマホでも他のパソコンからでも同時にデバッグできます。
デバッグをマルチデバイスで行うコツ
小技の項の通り、connectのアドレスを書き換えればそのアドレスからのアクセスを受け付ける事ができます。
そこで、変わりにローカルのIPアドレスを指定します。
そうすれば、同じネットワークの中にいるユーザーのみでデバッグをすることができます。
例えば、スタバでドヤ顔コーディングをしたいとき、
テザリングで←ここ重要。フリーwifiとかでは使えません
デバッグしたい端末やタブレット、及びみんなだいすきなMacを接続します。
そして、MacでifconfigとかしてローカルのIPアドレスを取得して、grunt serveをして、MacのローカルIPをブラウザで開けば、livereloadを使用して自動的にリロードしてくれる、とても快適な環境がいとも簡単に構築できます。
(小生はこれでスタバでタブレットやハンドセットを5台同時にデバッグしてたら周りの客に引かれました)
ご利用は計画的に。それでは良いコーディングライフを