webアプリ開発時の自動化めも(yeoman)

---

webのフロントエンド開発時の自動化(Yeoman)についてのメモ

webサーバはPCにApacheをインストールして使ってた

ディレクトリとか変えたらApacheの設定も変更が必要...(><)

MacOSのアップデート時にApacheもバージョンアップされて、これまでの設定が無効にorz

2.2 -> 2.4

ライブラリはダウンロードしてディレクトリに配置してた。。。

手動でやるのめんどい(-_-;)

管理もめんどい...

これからは自動化したい

Yeomanに変更後コマンドで出来るように!!

---

インストール

必要なもの

• Node.js
• Grunt
• Bower
• Yo

Node.jsはインストーラがあるのでそれを利用

Grunt, Bower, Yoは下記でインストール

$ sudo npm install -g  bower grunt-cli yo

Generatorをインストール。今回はwebapp

• https://github.com/yeoman/generator-webapp

• Generatorはangularやwebappなど、それぞれ存在するので個別にインストールする

  • http://yeoman.io/generators/

$ sudo npm install -g generator-webapp

インストールの詳細については下記を参考にさせてもらいましたm(__)m

http://dev.classmethod.jp/etc/yeoman/

http://www.topgate.co.jp/blog/76

http://www.atmarkit.co.jp/ait/articles/1407/02/news040.html

---

プロジェクトテンプレートを生成する

プロジェクト用のディレクトリを作成 & 移動

$ mkdir $DIR && cd $DIR

テンプレート生成実行

$ yo webapp

実行後のディレクトリ構成

$ ls -1a
.
..
.bowerrc
.editorconfig
.gitattributes
.gitignore
.jshintrc
.yo-rc.json
Gruntfile.js
app
bower.json
bower_components
node_modules
package.json
test

Gruntでサーバを立ち上げて確認する

$ grunt server

するとhttp://localhost:9000/でブラウザが立ち上がる

表示されているページはapp/index.html

試しにapp/index.htmlを編集すると、自動的に更新は反映される

livereloadという機能らしい（すげー）