gulp導入　~初期設定(mac)~

# はじめに

はじめまして！

株式会社GizumoというできたてほやほやのIT会社で働かせてもらっているozima shinsukeです！

この記事はその会社の社員が書いている[Gizumoエンジニア Advent Calendar](http://www.adventar.org/calendars/919) 2015の14日目の記事です。

今回はタイトルの通りgulpってなに？？？？という話をしたいと思います！
(何を今更ってツッコミは華麗にスルーします)

# gulpって？？？
>Node.jsのStreamAPIを利用したビルドシステムです。

ってこんな説明でわかるかーーい！！
なのでしっかりとググりました。

>gulpとは、Node.jsを使ったタスク自動化ツールです。 CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」 というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。
www.webcreatorbox.com/tech/gulp/

いやーさすがグーグルさん！だいぶわかりやすくなりましたね！！

要はさまざまな作業を自動化してくれる便利な奴ってことですね(小並感)

では実際に動かすところまでやってみましょう！

# 環境構築

gulpはNode.jsのパッケージの一つなので、まずNode.jsをインストールする必要があります。

## Node.jsをインストール

[いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜](http://liginc.co.jp/web/programming/node-js/85318)

僕が敬愛してやまない株式会社LIGさんの記事を完全に~~パクリ~~参考にさせてもらってます！

やり方はめちゃ簡単！
まずNVM(Node Version Manager)をインストール！

``$ git clone https://github.com/creationix/nvm.git ~/.nvm``
``$ source ~/.nvm/nvm.sh``

次に
``$ nvm help
Node Version Manager
Usage:
nvm help Show this message``
でhelpが表示されていればOKです！

``$ nvm ls-remote
v0.1.14
v0.1.15
v0.1.16
``

で次にインストールします！

``$ nvm install v0.12.9``

で確認！
``$ node -v
v0.12.9``

問題なさそうですね！
では次に行きましょ！！

基本macのインストール手順になっているので、Windowsの人は~~あきらめ~~下記URLを参考にしてください。

[node.js インストール備忘録（windows7）](http://qiita.com/yokoh9/items/20d6bdc6030a3a861189)


# gulpのインストール
ここまで来るのに長かったですね！
いよいよgulpのインストールです！

``npm install -g gulp``
※上記コマンドでエラーが出る場合sudoをトップにつけ管理者権限で実行します。

次にgulpを使いたいプロジェクトのディレクトリを作成、移動します！

``mkdir hogehoge
cd hogehoge
``

これで移動できました！

そしたら次に
``npm init``
をして、package.jsonの作成をしましょう！
いろいろ聞かれるが、基本YESで大丈夫！

gulpは全体で使うグローバルと、プロジェクト単位で使うローカルがあります！
なのでこんどはローカルのgulpをインストールしましょー！

``npm install -D gulp``
これでローカルにもダウンロードされました！

確認
``gulp -v
[00:22:48] CLI version 3.9.0
[00:22:48] Local version 3.9.0
``
こんなのが表示されればOK

#  プラグイン（パッケージ、モジュール）のインストール
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プラグインを入れた場合の例

### 取り込みたいプラグインをインポートする

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(“出力先”)で出力先に処理を施したファイルを出力


# 実際に動かす！

新しくprodディレクトリと、srcディレクトリをつくってみよー


`mkdir prod`
`mkdir src`

prodの中にcssディレクトリをsrcの中にscssディレクトリを更に作ろー！

`mkdir prod/css`
`mkdir src/scss`

その次にgulpfile.jsを作り

```gulpfile.js
var gulp    = require('gulp');
var sass    = require('gulp-sass');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});


gulp.task('default');
```

と記述してみよう！

でいざターミナルで起動！

```
gulp
```

なんか動いたっぽいけど意味が無い。。。。

そこで、
/src/scss/配下に
hogehoge.scssを作成！！

```
$color: #555;
$font-size: 14px;
$big-font-size: 18px;
 
body {
  background: $color;
  font-size: $font-size;
}
h1{
  font-size: $big-font-size;
}
```

みたいなソースを書いて再度チャレンジ！


/prod/cssに
hogehoge.cssができていればうまく行ってます！

こんな少しの労力で、scssのコンパイルができるのは楽しいですね！！


# まとめ
gulpの導入について振り返りも含めて書いてみました！

なかなか難しいですね。。。
いまさらgulpかよって思うかもしれませんが、未だに使いこなせていないのであんまり深くは聞かないでください！

僕は新しいもの好きなので、ツールや新技術に使われてしまっていることが多いのですが、それでも便利なものは便利なのでみなさんはいろんな新しい物を試していって自分に合う合わないが分かるまで、ツールを使い倒して欲しいです！

さて明日はわれらのまさかづ兄貴の出番です！！
めちゃ楽しみですね！！

ではでは！