Windows8（x64）で構築したgulpの使い方

関連記事：
[Windows8（x64）でgulpを初期設定する](http://qiita.com/taguchinbo/items/23bfa57fc7dda04f2625)
[Windows8（x64）のgulpでうまくいかなかったプラグインの対処法](http://qiita.com/taguchinbo/items/c8eac89ceb40f67fee3d)

Windows8（x64）では上記２記事のように環境構築が大変だった。
今回はいよいよ使い方編で、上記２記事を行ったという前提で、
gulpのオレオレ使い方をまとめようと思う。

#基本的な使い方
###①Gulpファイルを任意のディレクトリに配置する。
ここでは説明用に「C:\test\project\gulp」というディレクトリに設置したものとして説明する。
※注意点として、**フォルダ名に日本語を含めると動かない**のですべて英語のフォルダにする。
###②プラグインを再インストールする
ディレクトリを移動するとプラグインが使えなくなるので、
以下コマンドでインストールする。

```
npm install
```
なお、面倒なことに、
[Windows8（x64）のgulpでうまくいかなかったプラグインの対処法](http://qiita.com/taguchinbo/items/c8eac89ceb40f67fee3d)
これをもう一回やらなければならない・・・ので
一回gulpを構築したらWindows8においては
そのままにしておくことをおすすめする。

###③「Gulp」フォルダ内にある「develop」フォルダに任意のファイルを入れる
```
gulp
  ├── node_modules
  ├── package.json
  ├── gulpfile.js
  ├── master
  └─── develop
       ├ index.html
       ├ css
       ├ js
       └ img
```
この「develop」内のフォルダに対して、Gulpの処理が走る。
###④コマンドプロントを立ち上げ、ディレクトリに移動する
以下のコマンドを打ち込むと、ディレクトリ移動できる。

```
cd C:\test\project\gulp
```
※私の場合、「gulp_start.bat」というバッチファイルを「project」フォルダに配置し、③の動作を省くようにした。

```
gulp
  ├── node_modules
  ├── package.json
  ├── gulpfile.js
  ├── gulp_start.bat　←これをクリックするとコマンド打つ必要が無い
  ├── master
  └─── develop
```
###⑤以下コマンドを打ち込み、あとはコーディングすればOK。


```
gulp watch
```
このコマンドを打ち込むことによりブラウザが自動で立ち上がり、
「develop」内のhtmlがブラウザに表示される。
あとはコーディングをし保存するだけで自動コンパイル、自動リロードが出来るようになる。
なお、「gulp watch」中はコマンドプロントは立ち上げたままにしておく必要がある。
作業が終わったら、コマンドプロントを閉じるか、「Ctrl+C」を押し、「y」を選択、終了する。

コーディングでうまくコンパイルが出来なかった場合、
エラー内容がコマンドプロントに出てくるので確認するとよい。
コーディングエラーについても、どこが間違っているか「gulp-notify」によって
エラー内容が出るようになっているので、確認するとよい。


#その他の使い方
私が作ったgulpファイルでは、「gulp watch」で出来ることは


- ライブリロード
- 自動コンパイル（compass）
- サーバー立ち上げ

この３点だけに絞っている。それ以外の機能を使いたい場合、
「gulp watch」していない状態で使用するようにした。
※画像圧縮やlintや整形などを同時に動かすと重い

ここでは、それ以外の機能を使うためのコマンドやどんな設定をしたのかを説明する。
コマンドの名前は私が設定した名前になっている為、
一例としてこのように分けているよという見方でよい。
なお、以下コマンドを打つ前に「gulp watch」をしている場合は
「Ctrl+C」を押し、「y」を選択、終了する必要がある。

###①ベンダープレフィックス自動追加
####コマンド

```
gulp autoprefixer
```

このコマンドはCompassでコンパイルしている時には使えないため、
gulp watchの内容をcompassではなくsassに書き換える必要がある。

```
gulp.task("watch",['server'], function() {
    gulp.watch(sass_src + "**/*.scss",["sass"]); ←初期値：「compass」を「sass」に変更
    gulp.watch(home_src + "**/*.html", ['bs-reload']);
    gulp.watch(home_src + "**/*.css", ['bs-reload']);
    gulp.watch(home_src + "**/*.php", ['bs-reload']);
});
```
###②スタイルガイド生成
####コマンド

```
gulp frontnote
```

スタイルガイドが生成できる。

###③コードチェック
####コマンド

```
gulp lint
```

html、CSS、jsのコードチェックを一括でできる。
個別にチェックしたい場合は、以下のコマンドを打つ。
####HTML

```
gulp htmlhint
```

####CSS

```
gulp csslint
```

####js

```
gulp jsLint
```

基本的にCSSでコードチェック出来れば
Sassまではコードチェックしなくてもよいかと考えている。
※Sassのlintのルール調整が難しいのもある
どうしてもやりたい場合において以下のコマンドを打つことで
コードチェックできる。
####Sass

```
gulp sassLint
```

####Scss

```
gulp scssLint
```

###④コード整形
####コマンド

```
gulp format
```

html、CSS、jsのコード整形がまとめてできる。
個別に行いたい場合は、以下のコマンドを打つ。
####HTML

```
gulp htmlPrettify
```

####CSS

```
gulp csscomb
```

####js

```
gulp beautify
```
###⑤画像圧縮
####コマンド

```
gulp imagemin
```
png、gif、jpg、svgの圧縮が出来る。ただし、gifアニメーションは圧縮できない。

###⑥コード圧縮化
####コマンド

```
gulp compression
```
CSSとjavascriptを圧縮できる。
個別に行いたい場合は以下のコマンドを打つ。
####CSS

```
gulp cleanCSS
```

####js

```
gulp uglify
```

#PHPとXamppの連携について
今回記載した内容はPHP環境を想定していない。
これを実現する為にはまた違った方法が必要なので、
それは別記事にまとめようと思う。