tanaka's Programming Memo

プログラミングについてのメモ。

Yeomanのmacへの導入とチュートリアル

Yeoman Web

Yeoman(ヨーマン)

公式ページ： http://yeoman.io/

Webアプリを開発する際に、利用したいライブラリを開発用フォルダー内に展開して、ビルドやテストの環境なども構築してくれるサービス。標準的なプロジェクトフォルダーの構築などを自動的に行ってくれるので大変便利。

macの OS X Yosemite 10.10.3 にインストールして、公式サイトのチュートリアルを完了するまでの流れをまとめる。

事前準備

nodeとnpmを最新版にする

Yeomanは最新版のnodeとnpmが必要。macにはプリセットでそれらがインストールされているが、バージョンが古いので、一度アンインストールして、最新版をインストールしなおす。すでに最新版になっていればこの手順は不要。

nodeとnpmのアンインストール
nodeとnpmをインストール

管理が簡単で、バージョンを切り替えることもできるnodebrewを使ってnodeをインストールする。

$ brew search nodebrew
$ brew install nodebrew
  • パスを設定するために、 vi ~/.bashrc などとして、設定ファイルを開く
  • 以下の行を追加する
export PATH=$HOME/.nodebrew/current/bin:$PATH
  • 以下を実行して、設定を有効にする
$ source ~/.bashrc
  • ターミナルを開いた時に.bashrcが有効になるように設定をする。以下で.bash_profileを開く
$ vi ~/.bash_profile
  • 以下のコードを追加する(参考URLより抜粋)
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
  • 安定版のnodeをインストール
$ nodebrew install-binary stable
  • インストールメッセージ中に、v0.12.2 のようなバージョンを表す文字列が表示される。そのバージョンを通常利用するバージョンに指定する。例えば、v0.12.2の場合は以下のとおり
$ nodebrew use v0.12.2
  • 以上で、インストール完了。npmも合わせてインストールされているはずである。以下でそれぞれのバージョンを確認する
$ node -v && npm -v
v0.12.2
2.7.5

すでにnodebrewを導入済みの場合は以下を実行して、新しいものがインストールされたらuseする。

$ nodebrew install stable

npmのグローバルインストール設定

npmは、nodeのパッケージマネージャである。グローバルインストールをYeomanのチュートリアルで行うが、フォルダーへのアクセス権限によってエラーが発生することがある。その際、sudoは使わず、予めユーザー用のグローバル設定をしておくことが推奨されているので、その設定を行う。

$ mkdir ~/.npm-packages
  • ~/.bashrc をviなどで開いて、以下の行を追加する(参考URLより抜粋)
NPM_PACKAGES="${HOME}/.npm-packages"
NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"
export PATH="$NPM_PACKAGES/bin:$PATH"
# Unset manpath so we can inherit from /etc/manpath via the `manpath`
# command
unset MANPATH # delete if you already modified MANPATH elsewhere in your config
MANPATH="$NPM_PACKAGES/share/man:$(manpath)"
  • ~/.npmrc をviなどで開いて、以下の行を追加する
prefix=${HOME}/.npm-packages
  • source .bashrc をターミナルで実行して、設定を有効にする

Yeomanのインストール

  • 土台を構築するyo、ビルドツールのgulpとgrunt、パッケージマネージャのbowerをインストール
$ npm install -g yo bower grunt-cli gulp
  • 以下で、標準的なWebアプリジェネレータを取得する
$ npm install -g generator-webapp
  • これらは、HTML5 Boilerplate(HTML5の代表的なテンプレート集), jQuery(JavaScriptの代表的なライブラリ), Modernizr(ブラウザの機能を調べるライブラリ), Bootstrap(標準的なインタフェースやレスポンシブルを簡単に構築できるcssとjsとfontのセット)が入っている
  • 任意の場所に、任意の名前でプロジェクト用のフォルダを作成して、cdで入る
  • 以下で、標準的なWebAppが準備される
yo webapp
  • bootstrap,sass,Modernizrを組み込むかを選択して実行
  • 以上で生成される

以下のようなエラーが表示された場合、原因はnodeのバージョンが古いこと。macではプリインストールされているnodeが悪さをすることがあるので、最初に記載したURLを参考にアンインストールする。その後、nodebrewをインストールして、最新版をインストールすると治る。

npm ERR! unpack Could not read data for ip-regex@1.0.3
npm ERR! unpack Could not read data for get-stdin@4.0.1
npm ERR! unpack Could not read data for repeating@1.1.2
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm v2.8.4

npm ERR! Cannot read property 'dependencies' of undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm v2.8.4
(中略)
npm ERR! unpack Could not read data for bl@0.9.4
npm ERR! unpack Could not read data for xtend@4.0.0
npm ERR! unpack Could not read data for end-of-stream@1.1.0
npm ERR! unpack Could not read data for readable-stream@1.0.33

npm ERR! Please include the following file with any support request:
npm ERR! /Users/yutanaka/Documents/temp/yeoman/test/npm-debug.log

Yeomanのチュートリアル

Yeoman公式サイトの以下のページから、AngularJSを使ったtodoアプリの構築手順を試すことができる。
Let's Scaffold a Web App with Yeoman | Yeoman

各ステップの注意点をまとめる。

Step1

  • すでに構築済みなので作業は不要
  • Yeomanをインストールしたのが古い場合は、最新版に更新しておく

Step2

  • 問題なし
  • generator-angular のインストールでエラーが発生する場合は、nodeとnpmのバージョンが古いことが原因の可能性が高い。最初に紹介している手順でnodeとnpmを更新する

Step3

  • 問題なし。手順通りに進めれば良い

Step4

  • 構成の紹介のみなので問題なし

Step5

grunt serve でエラーが発生する(2015/4/30現在)。以下でエラーを回避する。

    // Automatically inject Bower components into the app
    wiredep: {
      options: {
        // cwd: '<%= yeoman.app %>'
      },

Step6

Step7

  • 問題なし。手順通り進める

Step8

grunt test で Can't find variable: jQuery というエラーが発生する場合がある(2015/4/30現在)。その場合は、以下の対応を行う。

      "bower_components/jquery/dist/jquery.js",

Step9以降

  • 問題なし。手順通り進める

まとめ

以上で、インストールからチュートリアルまで完了できると思います。Webアプリの世界に慣れていないと、標準的なフォルダー構成を作るだけでも大変であるし、必要なライブラリの収集、ライブリロードやビルド、テストの設定までやってくれるのは大変助かります。

Yeoman自体や利用する環境のバージョンアップが頻繁なため、環境を最新に保つことが重要です。また、公式ドキュメントにないエラーも色々と発生ため、ネットで検索して、英語を読みながら原因を調べる必要もあります。しかし、得られるメリットの大きさを考えると、それらを乗り越えるメリットは大きいと感じます。

エラーを調べながら進めたため、対応が抜けている部分があるかもしれません。何かあればご連絡いただければ幸いです。