gulpのセットアップ windows編

Macと同じような手順でインストールを行おうとしたが、思った以上に時間を取ってしまったので、簡単なセットアップ方法をメモとして以下に残す。[Windows7(32bit)](https://az412801.vo.msecnd.net/vhd/VMBuild_20141027/VirtualBox/IE10/Mac/IE10.Win7.For.Mac.VirtualBox.zip)で動作を確認した。

# メリット
使う意味あるの？について、[html,js,cssの高級言語をコンパイルして、結果をすぐ見れるプラグイン](http://qiita.com/59naga/items/90f254eefecc81702937#3%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89)があるのが大きい。あるいは、コンパイル済みのcssに、自動でベンダプレフィックス（`display:-webkit-box`など）を付ける[gulp-pleeease](http://isee-web.net/?p=593)や、[VannilaJS](http://vanilla-js.com/)を[CommonJSライクの記法](http://memo.yomukaku.net/entries/jbjiYnP)で書けるようになる[browserify](http://qiita.com/seanchas_t/items/96fbb63e5fe36f94a42e)／[webpack](https://github.com/shama/gulp-webpack)、[デザインの共通部分の隔離・継承・上書きが行えるjadeのプラグインがあり]()、**gulpは、フロントエンドの開発に実用的と言える。**

# インストール
## git / Git Bash

http://git-scm.com/downloads/ の「Downloads for Windows」から最新版をダウンロードする。インストール時の設定は全てデフォルトで構わない。インストール後、プログラムに「Git Bash」が追加されていることを確認する。

![スクリーンショット 2015-01-14 11.19.33 PM.png](https://qiita-image-store.s3.amazonaws.com/0/28576/de748a1f-4249-a7da-542a-81bdb552ca44.png)


## nodejs / npm

https://nodejs.org/download/ からINSTALLを押してインストーラーでダウンロードする。設定は全てデフォルトでよい。

> nvmw, nodistなどを使用して、nodejsのバージョンを複数分けて使うことも出来るが、環境変数の設定がややこしく、つまずくと数時間取られるので、もしやりたいのであれば[Vagrant](http://dotinstall.com/lessons/basic_vagrant)でCentOSを立ち上げて、そちらに[nodebrew](http://qiita.com/sinmetal/items/154e81823f386279b33c)を入れる確実な手段を奨める。

# Git Bashの初期設定
起動する前に、Git Bashを右クリックして
プロパティ＞「ショートカット」タブ＞詳細設定（D）＞管理者として実行（R）をチェックしておく。

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/28576/9ef6e1be-c80a-a4c9-5ed8-c83796446cb8.png)

起動したら、まずnodeとnpmのバージョンを確認する。

```bash:GitBash
$ node -v
v0.10.35

$ npm -v
1.4.28
```

## Git Bashでgulpをインストールする
```bash:GitBash
$ npm install -g gulp
$ gulp -v
CLI version 3.8.10
```

**以上でセットアップは終了。**

### が、入らないケースがある
日本語Windows7 64bitでインストールを行おうとした時に、`v8flags@1.0.1 install C:\Users\username\node_modules\gulp\node_modules\v8flags
node fetch.js`などと出力され、失敗することがあった。
[stackoverflowでも同様の記事があり、回答の通りの方法で解決できた。](http://stackoverflow.com/questions/26592611/gulp-js-trouble-installing-cannot-find-module-fetch-js)つまり

```bash:GitBash
$ npm install -g gulp@3.8.8
$ gulp -v
CLI version 3.8.8
```

および、gulpfileを書くフォルダには

```bash:GitBash
$ npm install gulp@3.8.8
```

が必要になる。3.8.10では動かないらしい。

# シンプルなgulpfileを書く
gulpを使用するには、`$ gulp`を実行したところ(`./`)に

1. 設定ファイル（`./gulpfile.js`か`./gulpfile.coffee`）
2. モジュール（`./node_modules/gulp`ほか）

が必要になる。

例えば、あるフォルダ`from`のファイルを、別のフォルダ`to`にコピーするタスクを書くとき、以下のようなフォルダ構成で作るとしよう。

```bash
./
 ├── gulpfile.js
 └─┬ from
   └─ hoge.txt # 中身はなんでもいい
```

```js:gulpfile.js
var gulp = require('gulp');
gulp.task('default',function(){
  gulp.src('./from/*')
    .pipe(gulp.dest('./to/'))
  ;
});
```

これで1.設定ファイルの用意はできた。ここ(`./helloworld`)で`$ gulp`すると`Try running: npm install gulp`とエラーが出るので、言われたとおり`npm install gulp`する

```bash
./
 ├── gulpfile.js
 ├─┬ from
 │ └─ hoge.txt
 └─┬ node_modules
   └─ gulp 
```

2.gulpモジュールがインストールできた。もう一度`$ gulp`する。

```bash
Using gulpfile ./gulpfile.js
Starting 'default'...
Finished 'default' after *.** ms
```

```bash
./
 ├── gulpfile.js
 ├─┬ from
 │ └─ hoge.txt
 ├─┬ to
 │ └─ hoge.txt
 └─┬ node_modules
   └─ gulp 
```

**おめでとう。タスクは正常に処理され、`to`フォルダにファイルがコピーできた。**

### おまけ `gulpfile.coffee`を使用する

1. coffee-scriptをインストールする

```bash:GitBash
$ npm install coffee-script
```

```bash
./
 ├── gulpfile.coffee #jsは置かない
 ├─┬ from
 │ └─ hoge.txt
 └─┬ node_modules
   ├─ .bin
   ├─ gulp
   └─ coffee-script
```

```coffeescript:gulpfile.coffee
gulp = require 'gulp'

gulp.task 'default',->
  gulp.src './from/*'
    .pipe gulp.dest './to/'
```

`$ gulp`で動かない場合は、以下のように引数を与えて実行する。

```bash:GitBash
$ gulp --require coffee-script/register
...
Finished 'default' after *.** ms
```

# Have fun？
* [npmでnode.jsのpackageを管理する](http://qiita.com/sinmetal/items/395edf1d195382cfd8bc)
* [HTML界隈の高級言語を使ってみる](http://qiita.com/59naga/items/90f254eefecc81702937)
* [main-bower-filesを活用する](http://qiita.com/59naga/items/02ba2963fd957ef6cf36)