Windows8.1のノートPCにphpの開発環境を構築しようと思い、gulpとbowerをインストールしようとして結構ハマったので、その時のTIPSをまとめておく。
Windows 8.1の罠
まず、Windows8.1の罠としか言えないヒドイ仕様なのが、初期インストール時にWindows IDのユーザー名に漢字等のマルチバイト文字を含んでいると、ユーザーディレクトリ C:\Users\ 直下のディレクトリ名がそのマルチバイト文字で作成されてしまい、後からの変更ができないということだ。私も見事に C:\Users\名前\ になっていて、この状態だと、node.js をインストールしてもパスが通らず（環境変数を直接編集してもダメだった）、npmのインストールができないのだ。
これを回避するには、ローカルユーザーを追加して、初期インストール時のユーザーを削除し、作成したローカルユーザーにWindows IDを改めて紐づけるという超面倒な作業が必要になる。追加したローカルユーザーを管理者ユーザーに設定しても、システムディレクトリの C:\ 直下のファイルの所有者が切り替わらないので、そこは手動で所有者変更をしてあげる必要がある。One Driveのファイル移動やら所有者不明でアクセスできなくなったディレクトリやファイルを個別で所有者変更など、まずこのユーザー移管作業に半日以上かかった…orz
Linuxみたいに chown -R UserName C:\. とかできれば苦労はしないんだが、ファイルやディレクトリを一つずつGUI側から右クリック→「プロパティ」で変更していくのは苦行でしかないッス（T＿T）
もし、再インストールしても問題ない場合は、マルチバイト文字をユーザー名に含まないローカルユーザーを作成しながらWindows再インストールをしてしまうのが一番である。
環境の準備
さて、私のノートPCはCore i7だが、メモリが４GBしか積んでないので、VirtuarlBox+Vargrantの仮想環境だとパフォーマンスが出ないだろうなぁ…と思い、PHP開発環境はxamppにした。というわけで、node.js を入れる環境は xampp になる。さらに、もはや世界の必須アイテム Git は事前にインストールしておく。
xampp の apache では vhost 設定して、Windows側の Hosts にもホスト名を追加して、ブラウザからは localhost ではなく、ドメインURLでアクセスできるようにしておいた。
node.js のインストール
ようやく、準備ができたので、早速 node.js をインストールする。Windows用の node.js のインストールは簡単で、公式サイトのnodejs.org からインストーラーを落として実行するだけだ。2015/5/16時点の最新バージョンは0.12.3だった。
インストールが終わったら、エクスプローラのパス欄に「powershell」か「cmd」と打ち込むか、「ファイル」メニューからコマンドプロンプトを実行して、
> node -v
v0.12.3
と表示されればOKだ。もし node コマンドが見つからないと言われたら、環境変数のパスを通す必要がある。コントロールパネルを開いて「すべてのコントロール パネル項目」→「システム」→「システム詳細設定」→「詳細設定」タブの「環境変数」から、「システム環境変数」の「Path」の値を編集する。
C:\Program Files\nodejs\
上記の実行パスを変数値の最後に追加する。これで node.js が使えるはずだ。
gulp と bower のインストール
node.js をインストールするとパッケージ管理モジュールのnpmも自動でインストールされるので、npmコマンドを使ってタスクランナーの「gulp」とアセット管理ツール「bower」をインストールする。
コマンドラインから、
> npm install -g gulp bower
でOKだ。-gオプションはグローバルにインストールためのオプションだ。
次に、実際にgulpやbowerを利用するプロジェクトのディレクトリにインストールする必要がある。そのためには package.json や bower.json といった各種パッケージ管理ファイルを作成する必要がある。
ただ、今回はすでにそのあたりをすべて定義済みのプロジェクトファイルをGitHubから読み込むので、ファイルの定義方法などは割愛する。
ということで、プロジェクトディレクトリを作成したいところにディレクトリを作成して、コマンドラインから、
> git clone -b branch_name https://github.com/git_user_name/repositry_name.git my_project_dir
を実行する。ちなみに、私の場合のプロジェクト用のリポジトリは「https://github.com/ka215/cdbt.git」である。
では、この my_project_dir 内に gulp と bower をローカルインストールする。プロジェクトディレクトリ内に移動して、コマンドラインから、
> npm install
> bower install
これで、gulpを含むnpmモジュール群とbowerがインストールされたはずなので、確認してみる。
> gulp -v
> bower -v
バージョンが表示されればOKだ。しかし、私の場合はここで gulp や bower コマンドが見つからないと表示された。Windows8.1ではnpmのモジュールをローカルインストールすると、グローバルで設定されているnpmのパスから外れたところにインストールされるので、そのパスを別途通してやる必要があるのだ。
というわけで、再び環境変数のパスを編集する。コントロールパネルを開いて「すべてのコントロール パネル項目」→「システム」→「システム詳細設定」→「詳細設定」タブの「環境変数」から、今度はユーザー環境変数とシステム環境変数の両方に以下のパスを追加する。
C:\Users\{UserName}\AppData\Roaming\npm
{UserName}の部分はWindowsインストール時のユーザー名になる。
これでようやく gulp と bower が動くようになった。
いやはや、Windows8.1の罠もあって、環境作るのに一日潰してしまった…。