関連記事：
Windows8（x64）でgulpを初期設定する
Windows8（x64）のgulpでうまくいかなかったプラグインの対処法
Windows8（x64）では上記２記事のように環境構築が大変だった。
今回はいよいよ使い方編で、上記２記事を行ったという前提で、
gulpのオレオレ使い方をまとめようと思う。
基本的な使い方
①Gulpファイルを任意のディレクトリに配置する。
ここでは説明用に「C:\test\project\gulp」というディレクトリに設置したものとして説明する。
※注意点として、フォルダ名に日本語を含めると動かないのですべて英語のフォルダにする。
②プラグインを再インストールする
ディレクトリを移動するとプラグインが使えなくなるので、
以下コマンドでインストールする。
npm install
なお、面倒なことに、
Windows8（x64）のgulpでうまくいかなかったプラグインの対処法
これをもう一回やらなければならない・・・ので
一回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環境を想定していない。
これを実現する為にはまた違った方法が必要なので、
それは別記事にまとめようと思う。