読者です 読者をやめる 読者になる 読者になる

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Yeomanを使って楽をしてみる

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)と開発中の内容をブラウザで確認できる。
  • とりあえず動いたので満足。