matsuo

2016.04.08

Windows 8 にゼロから gulp環境をセットアップする手順まとめ

JavaScript

最近、Windows環境の方に gulp をセットアップするお手伝いを連続でやっておりましたので、手順をまとめておきます。
Mac だとすんなりいくインストールも、Windows だと妙なハマり方をすることがあるので、ご参考になればと…

今回のゴール

Windows 8.1 環境で、gulpを起動するところまでです。
gulpfile をゼロから書くのも手間なので、今回は Yeoman の Web app generator というものを使いました。

gulp + Web app generator でできること

Sass のコンパイル、AutoPrefixing
Babel
browser-sync によるプレビュー
lint やテスト
SourceMap の出力
画像の最適化
ライブラリファイルの結合・難読化

などなど…… かなりの設定が、最初から入っています。これが動くところを目指します。

Windows でのターミナル(黒い画面)はどれを使う？

gulp環境はいわゆる黒い画面で操作していくわけですが、Windows にはその黒い画面、ターミナルのようなものが、いろいろ種類ありますよね。
コマンドプロンプト、PowerShell, いやいや cygwin だ、git bash がいいらしいよ……

この時点でけっこう迷ってしまう訳ですが、今回の環境では、「コマンドプロンプト(管理者)」で試しました。ちなみに、 Windowsキー + X で表示されるメニューから簡単に起動できます。

nodist で node.js をインストール

まずは node.js のインストールなのですが、node.js はバージョンの移り変わりが早いので、バージョン切り替えを簡単にできる nodist というツールを使いました。Mac でいう nodebrew のようなものです。

https://github.com/marcelklehr/nodist/releases

ここから NodistSetup-v0.7.2.exe というファイルをダウンロードして、普通にインストーラでインストールします。(注: この記事を書いた時点ではバージョン 0.7.2 が最新でした)

で、いよいよ黒い画面の出番です。コマンドプロンプトを起動してください。以下のコマンドを入力します。

nodist v4

nodist 経由で、node.js のバージョン4系がインストールされます。うまくいったら、以下のコマンドで node.js のバージョンを確認してください。

node -v

バージョン4であると出力されていれば、node.js のインストールは完了です。

Chocolatey をインストール

実は node.js でいろんなパッケージを扱う際、Git や Ruby や Python が入っていないとコケることが多いようです。Mac ではそれらはプリインストールされているので意識しなくても動いたりするのですが、Windows の場合は自前でインストールする必要があります。

たくさんのツールを個別にインストールするのは面倒なので、Chocolatey というパッケージ管理ツールを使いました。Mac でいう homebrew みたいなものです。

Chocolatey のインストールはサイトに書いてあるとおりですが、コマンドプロンプト(管理者)から以下の長いコマンドを入力します。(コピペでどうぞ)

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" &amp;&amp; SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

終わったら、バージョン情報を確認。

choco -v

この記事を書いた時点では、バージョンとして 0.9.9.12 が表示されました。

Git と Ruby と Python をインストール

Chocolatey を使って、Git と Ruby と Python を一気にインストールします。1行にまとめて書けます。

choco install -y git ruby python

それぞれ、バージョン情報を確認しておきましょう。

git --version
ruby --version
python --version

もしインストールできているはずなのに gitが見つからない、などのエラーが出る場合は、一度コマンドプロンプトを立ち上げなおしてみてください。(環境変数 PATH の反映のために、再立ち上げが必要な場合が多いようです)

これでようやく、Windows 特有のセットアップが終わりました。ここから先は、Mac でも同じような手順になります。

gulp と Yeoman をインストール

あと少しです。
いよいよ gulp と Yeoman (＋その関連パッケージ)のインストールとなります。node.js のパッケージ管理ツールである、npm を使います。

npm install --global gulp-cli yo generator-webapp bower

ちゃんとインストールできたか、バージョン表示を確認します。

gulp -v
yo --version

これで全ツールの用意が整いました。

ジェネレータで gulp 環境を作る

Yeoman のジェネレータを使い、プロジェクトごとに gulp の環境を作りましょう。
どっかにプロジェクト用の新規フォルダを作って、そこに移動してください。(以下はルート直下に gulp-sample というフォルダを作成して、移動する例です)

mkdir ¥gulp-sample
cd ¥gulp-sample

そこから Yeoman の yo コマンドで、gulp環境を作成します。

yo webapp

Yeoman がいろいろパッケージを用意してくれるので、数分ほど時間がかかります。待ちます。

gulp を起動する

あとは動作確認するだけです。以下のように入れます。

gulp serve

browser-sync を通して、ブラウザが勝手にたちあがります！こんな画面です。

コード類は /app フォルダの中に入っています。SCSSファイルは /app/styles 配下です。これらを編集して保存すると、gulp が勝手にコンパイル → ブラウザのリロードをやってくれます。

どうでしょう、ここまでで gulp がひととおり動くようになるのですが、うまくいっていますでしょうか？

この gulpfile の細かい使用方法は、README を確認してください。
https://github.com/yeoman/generator-webapp

注意点

Windowsでの環境構築で、ハマったポイントをいくつか挙げておきます。

日本語フォルダ名は使わない

日本語を含むフォルダ配下で作業していると、Sassのコンパイルでエラーが起きる環境がありました。日本語フォルダや日本語ファイル名は使わないほうが無難です。

随時、コマンドプロンプトの再起動を

いろいろインストールしている最中に環境変数 PATH の設定が変わるのですが、それを反映するために、コマンドプロンプトの立ち上げなおしが必要な場面があるようです。インストールできているはずなのになんかコマンド見つからないって出る! という場合は、落ち着いてコマンドプロンプトの再起動をしてみてください。

過去にインストールした node.js や Ruby などは消してから再インストール

昔ちょっと node.js とか入れて試してた、いまは使ってないです、みたいなのがあれば、あらかじめアンインストールしておくのが良さげです。たぶん、今とだいぶバージョン変わってます。特に npm のバージョンが2のままだと、Windows環境では node_modules 配下の階層が深くなりすぎて死にます。
また、環境変数 PATH からも不要なものは消し、きれいにしておくほうがハマりにくいかと思います。