最近、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 v4nodist 経由で、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'))" && 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 webappYeoman がいろいろパッケージを用意してくれるので、数分ほど時間がかかります。待ちます。
gulp を起動する
あとは動作確認するだけです。以下のように入れます。
gulp servebrowser-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 からも不要なものは消し、きれいにしておくほうがハマりにくいかと思います。
まとめ
- nodist いれて node.js いれて chocolatey いれて git と ruby と python いれてからの gulp
- Windows上での手順はなかなか大変でしたが、いったん動作するようになってしまえば、Mac の人とも同じ環境で作業できます
- 2016年夏の Windows 10 で bash が動くようになる、というニュースにも期待……！
※以上は 2016年4月時点で確認した情報です。