コンパイル
圧縮
保存

といった動作を自動でやってくれる賢いGulp。
でも環境構築はいつもひとまかせ。
さすがに覚えようと、うちの会社でちょくちょくやってる勉強会に参加しました。

準備

node.jsのダウンロード

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

gulpをインストール

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

フォルダつくる

gulpfile.jsをつくる
$npm init でpackage.jsonをゲットする
$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を使うとメディアクエリが超楽。

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

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

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

Gulpを克服する

準備