ざっくりGulp.js入門（Mac向け）

プログラミング学習サービスやら、ペットサロン予約サービス、風俗検索サービスなど色々とやっている「かずきち」です。
■運営サービス一部
http://crazy-wp.com/
http://webukatu.com/
新宿のホストから不動産・保険の営業を経て、HTMLって何？という状態から３ヶ月独学でプログラミングやデザインを学び、IT業界で１年間実務経験を積んで年収は１本超え。現在は起業家としてサービス運営やら不動産運営をしています。
Qiita内にそれ系の記事も書いてます。
エンジニアで稼ぐために大切な１３のコト
WEBサービスで起業したい人に読んで欲しい１８のコト

##Gulpとは？？
タスク自動化ツール。
画像やjs、cssなどの色々なファイルを圧縮してくれたり、CSSプリプロセッサのSASS、LESS、Stylusなどを自動でコンパイルしてくれたり、ファイルが更新されたら自動でブラウザを更新して最新の画面を表示してくれたりと色々なことが出来ちゃうツール。
同じタスク自動化ツールでGruntというものもあるが、Gulpの方が後発なのでシンプルに書け、Gruntと違い非同期で処理を行うので処理速度も速い。
WEBサービスを効率的に量産したり、保守性を高めたい場合には必須。
一度使い始めちゃうと便利すぎて手放せなくなる。

Gulpの導入方法

###１．Node.jsのインストール
Gulpを使うにはNode.jsが必要。Homebrewなどでインストールしておく。
HomebrewはMacのパッケージ管理ツール。Macのアプリとかをコマンドラインからインストール・更新・管理できる。

A.　Homebrewのインストール

下記サイトからインストールする。

既にインストール済みの場合は以下コマンドでHomebrewを最新にしとく。

brew update

B.　node.jsのインストール

下記コマンド実行

brew install node

下記コマンド実行してバージョンが表示されれば正常にインストールされている。

node -v

npmのインストール

npmはnode.jsのパッケージ管理ツール。これにより、同じ環境をすぐに別でも構築できるようになる。
homebrewでNode.jsをインストールするとnpmもインストールされるので、不要。

グローバルでgulpのインストール

グローバルとローカル両方にインストールする必要がある。

グローバルとローカル

グローバルは-gオプションをつけるやつ。Mac全体共通で使いたい場合のインストール方法。
ローカルはプロジェクト内だけで使いたい場合のインストール方法。この方法でインストールするとカレントディレクトリにインストールされる。

グローバルでgulpをインストール

下記コマンド実行。

sudo npm install gulp -g

-g はグローバルにインストールするよ〜っていうオプション

プロジェクトフォルダの作成

Gulpはプロジェクトごとに使うことが出来るため、Gulpを使いたいフォルダを作る。
既にプロジェクトがある場合は必要なし。
＊npm installで入れていくモジュールと同じ名前のディレクトリ名にしないよう注意！！
　（例えば、gulpってディレクトリにしてしまうと　後で入れるnpm install gulpでコケる）

package.jsonの作成

以下コマンドで、node.js用プロジェクトファイルを作成する。いろいろ聞かれるが、YESにしとけば大丈夫。

npm init

package.jsonの中身はこんな感じになる。（設定によって異なる）

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

ローカルでgulpをインストール

次にgulpを使いたいプロジェクトのフォルダ内で下記コマンド実行

npm install --save-dev gulp

ちなみに短縮形の下記コマンドも使える。

npm i -D gulp

※--save-devが-Dに短縮できる

gulpをインストールするとフォルダ内に下記のようなフォルダが作られる

/node_modules　←　gulpを動かすためのnode.jsのフォルダ
	|_/gulp　←　gulpが入ってるフォルダ

ちなみに--save-devと--saveの２つのオプションが指定できる。
ローカルでしか使わないもの（gulpとかgulp-sassとか）は--save-devでinstallしてやる。
アプリが動いている環境でも使うもの（jQueryとかreactとか本来html上にscriptタグで読み込んで使うもの）は--saveでinstallしてやるといい。

それぞれ、下記のようにpackage.jsonに
--save-devならdevDependenciesに
--saveならdependenciesにモジュールが追加されるので、見分けやすくなる。

json

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "jQuery": "^3.1.0"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

####gulpがグローバルとローカル両方に入っているか確認
下記コマンド実行

gulp -v

以下のようなCLIなんちゃらとLocalなんちゃらという結果が出てくればOK
CLIの方はグローバルでインストールしたもの。Localはローカルにインストールしたもの。
どっちかがない場合には、インストール出来てないので、再度インストールし直す。

[10:02:46] CLI version 3.8.10
[10:02:46] Local version 3.8.11

###プラグイン（パッケージ、モジュール）のインストール
gulpで行いたいタスクによってプラグイン（パッケージとかモジュールとも言う）をインストールしていく。

主なプラグインの種類

パッケージ	　　　　説明
browser-sync・・・	ブラウザを自動リロードさせる
gulp-autoprefixer・・・	cssのベンダープレフィックスをCan I Useを元にいい感じにつけてくれる
gulp-csso・・・	 cssの軽量化
gulp-if	・・・・　gulpのタスクの処理で、条件指定でいろいろできるようになる
gulp-imagemin・・・	画像の軽量化
gulp-jshint・・・	jsの構文チェック
gulp-load-plugins・・・	gulp-XXX系のプラグインをまとめてロードできる
gulp-minify-html・・・	htmlの軽量化
gulp-ruby-sass・・・・	sass
gulp-uglify・・・	jsの軽量化
gulp-useref・・・	html内のcssやjsの読込み部分を変更
jshint-stylish・・・	gulp-jshintの出力をスタイリッシュにする
rimraf・・・	nodeのためのrm -rf ディレクトリの削除に使用
run-sequence・・・	gulpタスクの実行順序を指定できる

例えば、gulpでStylus（CSSプリプロセッサ）を入れたい場合、下記コマンドをプロジェクトフォルダ内で実行

npm install gulp-stylus

そうするとプロジェクトフォルダ内に下記のようなフォルダが作られる。

/node_modules　←　gulpを動かすためのnode.jsのフォルダ
	|_/gulp　←　gulpが入ってるフォルダ
	|_/gulp-stylus　←　Stylusプラグインのフォルダ

このようにプラグインを追加すると/node_modulesの中にプラグインごとのフォルダが作られ、そこにプラグインのプログラムが入っている。

/node_modules　←　gulpを動かすためのnode.jsのフォルダ
	|_/gulp　←　gulpが入ってるフォルダ

###インストールしたプラグインを使えるようにgulpfile.jsファイルに記述
下記のような形でプロジェクトフォルダ内にgulpfile.jsファイルを新規作成。

/プロジェクトフォルダ
	|_gulpfile.js　←　新規作成
	|_/node_modules　←　node.jsのやつ。gulpとか入ってる。

下記はStylusプラグインを入れた場合の例（CoffeeScriptでの記述例）

##取り込みたいプラグインをインポートする
gulp = require 'gulp' ##gulpを使う場合、必ず書く（インポートする）もの
stylus = require('gulp-stylus') ##Stylusプラグインを入れる場合

##Stylusの設定
gulp.task 'stylus', () -> ## gulp.task(“タスク名”,function() {});でタスクの登録
    return gulp.src 'stylus/*' ## gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定
      .pipe stylus() ## pipe(行いたい処理)でsrcで取得したファイルに処理を施す
      .pipe gulp.dest('css/') ## gulp.dest(“出力先”)で出力先に処理を施したファイルを出力

.pipe()でgulpに行わせたい処理を連結させていく事が出来る。
（今回の例だとstylusのコンパイルを行った後、css/配下にファイルを出力している）

####MiniMatchパターンの例

"sass/style.scss"
sass/style.scssだけヒット

"sass/*.scss"
sassディレクトリ直下にあるscssがヒット

"sass/**/*.scss"
sassディレクトリ以下にあるすべてのscssがヒット

["sass/**/.scss","!sass/sample/**/*.scss"]
sass/sample以下にあるscssを除くsassディレクトリ以下のscssがヒット

#参考サイト
ビルドシステム gulp を試してみる【すぐに動かせるサンプル付き】 | コワーキングスペース7F
これからはじめるGulp.js（全俺） Advent Calendar 2014 - Qiita
9. LiveReload環境構築 - Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
gulpをcoffeescriptの形式で動かす：http://