Gulpを克服する

- コンパイル
- 圧縮
- 保存

といった動作を自動でやってくれる賢いGulp。
でも環境構築はいつもひとまかせ。
さすがに覚えようと、うちの会社でちょくちょくやってる[勉強会](http://leccafe.connpass.com/event/32758/ "勉強会")に参加しました。

#準備

##node.jsのダウンロード

Gulpはnode.jsで動いてるのでまずはダウンロードします。
バージョンについては4, 6などの偶数はLTS対応、5などの奇数は挑戦的な新機能を含むものらしい。
私は5でした。

##gulpをインストール

`$ npm i -g gulp`でgulpをインストール。

##フォルダつくる

1. `gulpfile.js`をつくる
2. `$npm init` でpackage.jsonをゲットする
3. `$npm i gulp node_modules`でnode_modulesもいれる

フォルダ名が"gulp"だとうまくいかないので、もしそうしちゃった場合はpackage.jsonの"name"をかきかえる。

#gulpfile.jsを書いてみよう

###記法ルール

基本は`gulp.task`と書く感じ。
`function`の中に内容を記述する。

```
var bourbon = require("node-bourbon");
```

のようにnode経由でいろいろインストールしてきたやつをよみこんでつかっていく。
コマンド叩いてうまくいかないときは`require`をチェックして、なければ`$ npm i`を。

##$ gulp（デフォルト）

```
var gulp = require("gulp");

gulp.task("default", function(){
    console.log("Hello World")
});
```

これで`gulp`とターミナルで叩くと **"Hello World"** と表示される。

##$ gulp {好きなタスク名}

次は早速自分の好きなタスク名で作ってみる。

```
gulp.task("sample", function(){
    console.log("this is sample sentence.")
});
```

`$gulp sample`を実行すると **"this is sample sentence."** と表示される。

##もうちょっといい感じにタスクを作成

buildが本番公開フォルダー、publicが開発環境用のフォルダー。
`gulp.dest`で処理されたファイルが入る場所を指定して **保存**。

```
gulp.task("image", function(){
    gulp.src(["./images/**/*"])
        .pipe(gulp.dest("public/img"));
    gulp.src(["./images/**/*"])
        .pipe(gulp.dest("build/img"));
});
```

下記のとおりでもOK。

```
gulp.task("image", function(){
    gulp.src(["./images/**/*"])
        .pipe(gulp.dest("public/img"));
        .pipe(gulp.dest("build/img"));
});
```

##pipeをつなげて書いたり

```
gulp.task("test", function(){
    gulp.src(["./images/**/*.gif"])
        .pipe(gulp.dest("public/img"))
        .pipe(gulp.dest("build/img"));
});
```

##複数タスクの実行

すでにつくった複数のタスクをまとめることだってできる。

```
gulp.task("message", ["default", "sample"]);

```

さらにその後taskを追加したいとき

```
gulp.task("message", ["default", "sample"], function(){
    console.log("Finished!")
});
```

##実行順序

先に作った`default`を実が終わらないうちに先に作った複数タスクの`message`が実行される。


#scss

以下基本的にプラグインを使う。

##コンパイル

- sassのフォルダ作成
- 中に~.scssファイルを作成

で以下のコマンドでプラグインを。

`$ npm i gulp-sass --save`

```
var sass = require("gulp-sass");

gulp.task("scss", function(){
    gulp.src(["./sass/*.scss"])
        .pipe(sass())
        .pipe(gulp.dest("public/css"))
});
```

`require`でプラグインのsassコンパイルの機能をとってきて、task内で`sass()`を渡す。

##オプション

###outputStyle

```
gulp.task("scss", function(){
    gulp.src(["./sass/*.scss"])
        .pipe(sass({
            outputStyle: "compressed"
        }))
        .pipe(gulp.dest("public/css"))
});
```

コンパイルされた後のファイルに記述される形式を指定。
たとえば`compress`をすると、圧縮された読みにくい形ではきだされる。

```test.scss
* {
  color: red;
}

h1 {
  color: blue;
}

p {
  background-color: #fff;
  margin-top: 10px;
}

```

```test.css
*{color:red}h1{color:blue}p{background-color:#fff;margin-top:10px}

```

###sourceMap

デバッグに使えるらしい。今回は省略

##gulp watchでコンパイルを監視

変更の度にコマンドをたたくのは嫌なので、変更を監視して自動コンパイルしてくれる`watch`を使う。
読み込み先の指定方法の違いは以下のとおり。

- src：処理に必要なファイルをよみこむ
- watch：監視する対象のファイル

```
gulp.task("watch", function(){
    gulp.watch(["./sass/*.scss"], ["scss"])
});
```

第一引数に監視するファイルパス、第二引数に実行するタスクを指定。

#Bootstrap

`npm i bootstrap-sass --save`

`--save`をつけるとpackage.jsonにbootstrapが記述されるので、同じファイルを他の人が使うときに楽。
node_modulesの中にbootstrapのファイルが入ってる。

```
gulp.task("bootstrap", function(){
    gulp.src([
        "./node_modules/bootstrap-sass/assets/**/*"
    ])
        .pipe(gulp.dest("public/lib"))
});
```

scssファイルに`@import`するのも忘れずに。

```
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
```

##変数について

Bootstrapのファイルをちょこっとかきかえれば自分の欲しい感じにカスタマイズも可能。
ただ、直接書き込むと絶対わからんくなるので一度全てコメントアウトして、必要なところだけ書き込むのがベスト。

#normalize css

`npm i normalize.css --save`

```
gulp.task("normalize", function(){
    gulp.src([
        "./node_modules/normalize.css/normalize.css"
    ])
        .pipe(gulp.dest("public/lib"))
});
```

#Bourbon/Neat

Bootstrapの無駄がなくて使い易いやつ。

`$ npm i node-bourbon --save`
`$ npm i node-neat --save`

```
var bourbon = require("node-bourbon");
var neat = require("node-neat");

gulp.task("scss", function(){
    gulp.src(["./sass/*.scss"])
        .pipe(sass({
            //outputStyle: "compressed",
            includePaths: bourbon.with(neat.includePaths)
        }))
        .pipe(gulp.dest("public/css"))
});
```

特に[Bourbon Neat Examples](http://neat.bourbon.io/examples/ "Bourbon Neat Examples")を使うとメディアクエリが超楽。

```
//ブレイクポイント
$mobile: 800px;

@include media($mobile) {
  //PC版のコード
  * {
    color: blue;
  }
}
```

Boubonは単独で使うことはあるけど、Neatは基本Bourbonとセットで使う。