Androidアプリ、Unityアプリに続いて、Webアプリを作ってみたくなった。
フロントエンド界隈は効率化・最適化がすごく進んでいる間隔なので、お勉強もかねて。
せっかくなので、Yeomanを使うところから。その備忘録です。
環境はいつもどおりのUbuntu14.04 64bit、エディタはVimです。
1. yeomanとは
- yeomanは下記のツールを含むツールキット？ワークフローだそうな。
- yo
- いろんなアプリのひな形を自動生成してくれるツール
- Grunt and Gulp etc
- Bower and nmp
- パッケージマネージャ。めんどくさいパッケージ間の依存などはこいつらが解決。
2. How to install
2.1. Install nodejs
- npmというNode.jsのパッケージ管理ツールを使うので、まずはNode.jsのインストールから。
- download tar.gz files from nodejs official site
- node-v0.10.32.tar.gz
# Download & Install
$ wget http://nodejs.org/dist/v0.10.32/node-v0.10.32.tar.gz
$ tar zxvf node-v0.10.32.tar.gz
$ cd node-v0.10.32
$ ./configure --prefix=/opt/nodejs-v0.10.32
$ make
$ sudo make install
# Build Test
$ make test
# Add symbolic links（個人の趣味でopt下に配置）
$ sudo ln -s /opt/nodejs-v0.10.32/ /opt/nodejs
# chmod
$ find /opt/nodejs-v0.10.32/ -type d | xargs -I{} sudo chmod 777 {}
# add /etc/environment
$ sudo vim /etc/environment
## PATH=....:/opt/nodejs/bin
# reload
$ source /etc/environment
$ source ${HOME}/.bashrc
2.2. Install yo, bower, gulp, grunt, sass, generator-xxxx
- 次に必要なパッケージ達をインストール
- 「Install generator-xxxx」には、とりあえず入れてみたひな形を列挙。
# Install yo $ npm install -g yo # Install Bower $ npm install -g bower # Insatl gulp $ npm install -g gulp $ npm install -g gulp-sass # Install Grunt $ npm install -g grunt-cli # Install sass $ gem install sass # Install generator-xxxx $ npm install -g generator-knockout-gulp-bootstrap # $ npm install -g generator-bootstrap # $ npm install -g generator-gulp-bootstrap3 # $ npm install -g generator-gulp-webapp # $ npm install -g generator-knockout # $ npm install -g generator-knockout-bootstrap # $ npm install -g generator-mocha # $ npm install -g generator-webapp-assemble
3. Sample
- 動作確認。上でもろもろ追加してますが、使った構成は下記の通り。
- [ひな形]: yoのgenerator-knockout-gulp-bootstrap
- [ビルドツール]: gulp
- [パッケージマネージャ] : bower
# Create Directory $ mkdir sample && cd sample && touch README.md # Basic scaffolding $ npm install -g knockout-gulp-bootstrap $ yo knockout-gulp-bootstrap # Launch Server $ gulp serve
- gulpでserveタスクを実行する（gulp serve）と開発中の内容をブラウザで確認できる。
- とりあえず動いたので満足。
