Yeomanでgenerator-angular-fullstack使ってMEAN環境作成するマニュアルのようなものを社内共有用に作ったけれども別に社内だけにとどめておく必要がないことに気付いたので公開。
正直申し訳ないことにWindowsユーザ向けにはもしかしたらダメな部分多々あると思われる。ごめん。
以下、今回インストールするもの一覧
- Node.js
- Yeoman (yo,bower,grunt-cli)
- generator-angular-fullstack(Yeomanのgenerator)
- Homebrew
- MongoDB
- CoffeeScript (任意)
- Sass(&Compass),LESS,Stylus(任意)
- node-inspector(任意)
Windowsの人はGit Bash使いたいのでGit for Windowsを入れておく。
下準備
ディレクトリ作って移動しておく
mkdir yeoman_test && cd yeoman_test
Node.jsのインストール
まずはNode.jsがインストールされているか確認しましょう。
node -v
which node
これでバージョン情報出たらインストールされてます。
-bash: node: command not found
とか出たらインストールされてないのでインストールしましょう。
Macでのインストール手順(インストール済の人は飛ばしてよし)
Nodeのインストールにはバージョン管理ツール使いたい。管理がラクだし、io.jsにも対応しているので。
バージョン管理ツールには、Nodebrew,nvm,naveなどあるが、個人的にはNodebrewがオススメということで以下Nodebrewを使ったインストール手順です。
ステップ的には
- Homebrewのインストール
- Nodebrewのインストール
- Node.jsのインストール
となります。
Homebrewのインストール
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
これをターミナルに叩けばおｋです。
インストール後に以下のことをしておきましょう。
brew doctor
brew -v
brew update
公式サイト - Homebrew
Nodebrewのインストール
brew install nodebrew
パスを通します。
vim ~/.bash_profile
次の一行を加えて保存(:wq) export PATH=$HOME/.nodebrew/current/bin:$PATH
再読み込み
source .bashrc
人によってbashかzshかとか違うと思うんですけど適宜対応してください。
bashの場合は ~/.bash_profile
zshの場合は ~/.zshrc
Node.jsのインストール
nodebrew ls-all
nodebrew install stable
nodebrew use v0.xx.xx(インストールしたバージョンの数字入れてください)
node -v
【参考】
【node.js】nodebrewでnode.jsのインストールめも
バージョン管理ツール入れたくない人は公式サイトでも見てやってくれ(雑)
Windowsでのインストール手順
WindowsでNodeのバージョン管理するのはnodistっていうのがいいらしい。
あとで詳しく書く。
Yeomanのインストール
sudo npm install -g yo grunt-cli bower
Nodeを使ってyoとgrunt-cliとbowerをインストールしているだけ。かんたんでしょ？sudoいらないかも？
インストールされたか確認しましょう。
yo --version
grunt --version
bower -v
バージョン表示されたら問題ないですが、doctorコマンド推進派なのでこれもやってほしい。
yo doctor
Everything looks all right!って出たらよし！
参考にしなくてもいい駄文
Yeomanを使うならまずはじめに覚えておきたいコマンド1選
generatorのインストール
いろいろあるのでぐぐってくさい。
今回インストールしてみるのは、angular-fullstackというMEANスタックのやつ。
sudo npm install -g generator-angular-fullstack
sudo npm update -g
ここも困る要素はないのではないだろうか。
MongoDBのインストール
インストール時には任意で --with-openssl か --devel を選択可能
brew update
brew install mongodb
brew upgrade mongodb
mongod
mongodb起動の手順
sudo mkdir /var/db/mongo
sudo chmod a+rwx /var/db/mongo
mongod --dbpath /var/db/mongo &
CoffeeScriptのインストール
npm install -g coffee-script
Sass(Compass),LESS,Stylusのインストール
ここらへんはプロジェクトによるので、そのプロジェクトに合わせてください。
SassとCompassを使う場合
gem install sass
これでSassインストール完了
次はCompass
gem install compass
LESSを使う場合
npm install less -g
Stylusを使う場合
npm install stylus -g
仮想環境の実行＆終了
実行 grunt serve
終了 ctrl + c
generator-angular-fullstackはHerokuへのデプロイもサポートしてるらしいよ！！
参考リンク集
node.jsを複数バージョン切り替えられるようにインストール（Mac:nodebrew Windows:nodist）
そのうちちゃんと載せる
MongoDB MANUAL / Installing
新しい Yeoman と、ついでに MEAN を試してみる
【Mac】nodebrewのインストールとコマンドなど使い方まとめ