はじめに

主に自分への備忘録ですが、復習も兼ねてgulp環境を始めから構築しました。
最初にgulpを触った２年前に比べたら、プラグインの仕様やバージョンもかなり変わってて
もし過去の記事で「このプラグイン動かないんだけど？！」って方がいたら、
改めてプラグインのREADMEを見ることをおすすめします。

目的

gulpを使って、Sass周りの以下の環境を構築します。

sassをcssにコンパイルする

ベンダープレフィックスを自動でつける
ソースマップの作成を行う
cssをminifyする

導入の手順を紹介していきますが、
手っ取り早く試したい方は、Node.js導入後、
下の 「補足・すぐにgulp sassを試したい人向け」 にジャンプしてください。

Node.jsのインストール

Node.js
公式ホームページからダウンロードして、インストールしましょう。

インストール後、ターミナルでコマンドをうって
バージョンが表示されたら、成功です。

$ node -v
v6.4.0

ということで、今回はVer6.4.0を使用しています。

プロジェクトの作成

npm initでプロジェクトの作成

$ mkdir gulp-startkit #適当にプロジェクトのフォルダを作る
$ cd gulp-startkit #フォルダ配下に移動
$ npm init #プロジェクトの作成

プロジェクトの名前、バージョン、などなど聞かれますが
エンターキー連打でとりあえず大丈夫です（デフォルト値が設定されます）

$ ls
node_modules	package.json

フォルダ内に、node_modulesフォルダとpackage.jsonファイルが作成されました。

node_modulesフォルダ

これからダウンロードするプラグインが保存されます。
容量が大きくなるので、もしプロジェクトをgit等で管理している場合は
node_modulesフォルダごと .gitignore に登録してgit配下に置かないことをおすすめします。

package.jsonファイル

ダウンロードしたプラグインの情報や、プロジェクトの情報が記述されます。
これがあれば、開発環境を色々な所にコピーすることができます。

フォルダの構成

プロジェクト配下に、以下のフォルダ構成を作ります。

gulp-startkit
|--build	#gulpにより書き出されたもの
|--node_modules
|--package.json
|--template #htmlを格納するところ
|--src	#gulpで読み込むもの
　　|--js
　　|--sass

プラグインのインストール

gulpのインストール

$ npm install --global gulp-cli -g #初めてgulpをインストールする時はグローバルにもインストール
$ npm install gulp --save-dev #プロジェクト内にローカルインストール

gulpをインストールします。
上記コメントにあるように、初めてgulpをインストールするときはグローバルにインストールする必要があります。
ローカルインストール時の最後の --save-dev は、インストールしたバージョン、プラグイン名が package.json に記述されるようにつけています。

package.json

  "devDependencies": {
    "gulp": "^3.9.1"
  },

package.jsonを覗いてみると、インストールしたプラグイン名 gulp と、そのバージョンが記載されていることがわかります。

gulpfile.jsの作成

gulpfileは、インストールしたプラグインをどう使うか記述していくjsファイルです。（タスクの登録を行う）
このように、node_modulesフォルダと同じ階層に置きました。

gulpfile.jsにタスクを登録してターミナルで実行

gulpを実行すると「welcome gulp!」が表示されるタスクを作成します。

gulpfile.js

var gulp = require('gulp');  //gulpプラグインの読み込み

gulp.task('default', function() {	//タスクの登録
    console.log("welcome gulp!");
});

保存したら、ターミナルで実行します。
gulpfile.jsのある階層で実行します。

$ gulp	#ッターン！
[18:13:10] Using gulpfile gulp-startkit/gulpfile.js
[18:13:10] Starting 'default'...
welcome gulp!
[18:13:10] Finished 'default' after 295 μs

うまく動きました。
この勢いで、色々なプラグインをインストールしてみます。

1.sassをcssにコンパイルする

gulp-sassのインストール

sassのコンパイルにはgulp-sassというプラグインを使用します。

$ npm install gulp-sass --save-dev

scssファイルの作成

gulp-startkit/src/sass/style.scss

$width: 500px;
$color: #44aaff;
# container {
    width: $width;
    background-color: $color;
    display: flex;
}

タスクの追加

gulpfile.jsにsassをコンパイルするタスクを登録します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');	 //プラグインの定義

gulp.task('default', function() {
    console.log("welcome gulp!");
});

gulp.task('sass', function () {  //'sass'という名前でタスクを定義
  return gulp.src('./src/sass/**/*.scss')  //sassがあるパス
    .pipe(sass().on('error', sass.logError))  //sassコンパイル実行
    .pipe(gulp.dest('./build/css'));  //書き出し先
});

タスクを実行する

$ gulp sass

もし、ここで
Error: The 'libsass' binding was not found
などのエラーが出た場合はnode-sassをrebuildするとうまくいきます（おそらくきっと）

$ npm rebuild node-sass  //エラーが出たらrebuild

書き出し先に指定した、build/css配下に
style.cssというファイルが追加されたことが確認できます。

build/css/style.css

# container {
  width: 500px;
  background-color: #44aaff;
  display: flex; }

2.ベンダープレフィックスを自動でつける

gulp-autoprefixerのインストール

ベンダープレフィックスを手書きで全部書くなんて・・・震えます。
書き出したcssにgulp-autoprefixer を使って、自動でベンダープレフィックスを付与しましょう。

$ npm install gulp-autoprefixer --save-dev

タスクの追加

gulpはpipeというメソッドを使って、タスクをつなげることができます。
さっき作ったsassコンパイルのタスクと一緒に定義します。
オプション機能として、対応させたいブラウザの設定を browsers に設定することができます。
設定できるブラウザの記述はこちらにあります。

//前略

var autoprefixer =require('gulp-autoprefixer');  //プラグインの定義


gulp.task('sass', function () {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({  //autoprefixerの実行
        browsers: ["last 2 versions"],
        cascade: false
    }))   
    .pipe(gulp.dest('./build/css'));
});

タスクを実行する

sassタスクと一緒にタスク定義しているので
同じコマンドでタスクを実行します。

$ gulp sass

build/css/style.cssに
ベンダープレフィックスが付与されていることが確認できます。

build/css/style.css

# container {
  width: 500px;
  background-color: #44aaff;
  display: -ms-flexbox;
  display: flex; }

3.ソースマップの作成を行う

gulp-sourcemapsのインストール

Chromeのデベロッパーツールでcssのエラーや詳細を確認する際、
その箇所がコンパイルで書き出されたcssではなく、
コンパイル前のsassのどの箇所に該当するか分かるようにしましょう。
その際に必要なソースマップを作成するため、gulp-sourcemapsを使います。

$ npm install gulp-sourcemaps --save-dev

タスクの追加

autoprefixerと同様に、sassのコンパイル時にソースマップを作成します。

gulpfile.js

//前略
var sourcemaps =require('gulp-sourcemaps'); //プラグインの定義

gulp.task('sass', function () {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())	//ソースマップを作ります
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ["last 2 versions"],
        cascade: false
    }))   
    .pipe(sourcemaps.write('.')) //ソースマップを書き出します
    .pipe(gulp.dest('./build/css'));
});

タスクを実行する

$ gulp sass

実行後、build/css/style.cssを開くと、最後の行に
ソースマップの場所が記述されています。

style.css

/*# sourceMappingURL=style.css.map */

実際に、示された場所にソースマップが作成されたことが
確認できます。

4.cssをminifyする

gulp-cssminのインストール

膨大な量になるcssはminifyすることで、
容量を小さくし、ページ読み込みの高速化につながります。
gulpでコンパイルされたcssをgulp-cssmin を使ってminifyを行います。

$ npm install gulp-cssmin --save-dev

タスクを実行する

$ gulp sass

実行すると、コンパイルされたcssが１行になって、
実際にminifyされたことが確認できます。

style.css

# container{width:500px;background-color:#4af;display:-ms-flexbox;display:flex}

補足・すぐにgulp sassを試したい人向け

今回作成したgulp-startkit をgithubにて公開してみました。
git clone後、package.jsonのある階層で、以下のコマンドを実行してください。
node_modulesフォルダが作成され、package.jsonに記載されているプラグインがインストールされます。

$ npm install

まとめ

これで、タイトル通りgulpにsassコンパイル,ベンダープレフィックス、ソースマップ、minifyを任せることができました。

今回はsass周辺のプラグインしか紹介していませんが、もっと便利に使えるプラグインを
また紹介していきたいと思います。