タスクランナー(Gulp)の入門の入門

フロントエンドの開発で、個人的にGulpなしはもう考えられないです！
デザイナーさんから
「タスクランナーってどういいの？ビルドツールとかnode.jsとかなんかややこしい」
ということをよく聞かれました。僕自身、Gulp導入するのに半年迷いましたw その経験も踏まえてそもそもGulpが何をしてくれるのか、使ったらどうなるのかをまとめたいと思います。少しでも、Gulpを導入するかどうかの決定に役立ててればと思います！
GulpもGruntも基本思想は変わらないので、ここではGulpについて説明します。

Gulpとかタスクランナーとかよく聞くけど、一体なんなの？？

面倒な作業

webの環境が進化するとともに、開発フローにもタスクが激増しました。

1. HTMLのコーディング
2. scssでスタイリングし、cssを生成
3. 画像は@2xなど解像度の大きいのも用意。
4. 画像の圧縮
5. javascriptのコーディング
6. javascriptを圧縮
7. PC・スマホ・タブレットでの動作確認

これの永遠の繰り返し／(^o^)＼

少し修正しただけで、多大なフローをこなさないといけない(´；ω；｀)ｳｯ…sassは自動で生成できても、それ以外は作業毎にコマンドを叩いたりする必要があります。
こういった煩雑な作業は「タブレットの動作確認してない( ﾟдﾟ)ﾊｯ!」「この画像圧縮できてない( ﾟдﾟ)ﾊｯ!」といったヒューマンエラーの原因。
「なんで、これ修正した箇所適用されてないの？あ、圧縮してないわ( ；∀；)」ということでどれだけ時間を無駄にしたことかw
さらにjavascriptをモジュール化したりなどすると、作業フローはもっとややこしくなります。

開発に集中したい

こういったミスを気にしてると、開発自体に脳みそのリソースを集中できないヽ(`Д´)ﾉこの作業にうんざりした人が、自動的にファイルの変更を検知しめんどくさい処理をするようにプログラムしました。ファイルの更新があると自動でやってくれるので、上記のようなミスをする確率がグッと減ります。

フロントエンド開発の煩雑な作業(タスク)を自動で処理する環境を作る人が増えたとき、ある人はこう思いました。
「このタスク処理を簡単にプラグインを導入するような形にしたらもっと便利でわかりやすくなるんじゃね？(*´ω｀*)」
そこでGulp, Gruntといったタスクランナーが登場しました。

Gulpを使った世界。そのメリット(コーディングするデザイナーこそメリットがある！？)

タスクランナーを使うことによって、ファイルの変更や、納品ファイル作成時にするタスクを無意識に処理することができます。
例えば

• cssにベンダープレフィックスをつける
• cssのプロパティの順番をABC順にする
• scssのコンパル
• 画像, css, javascriptの圧縮
• PC・スマホ・タブレットの実機確認
• javascriptのコーディングスタイルチェック

なんてことを、無意識にやっちゃってくれます！そして、その方法や順番などを詳細にカスタマイズできます。これに慣れてしまうと、逆に全て手動で処理するのが怖いです、はい((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
後にも述べますが、こういった作業ってフロントエンジニアだけの問題ではありません。むしろ、コーディングまで担当するデザイナーさんこそこのようなタスクに悩まされると思います。苦手なコマンドを決まった順番で何度も打ったりすることが苦手な人ほど、あわよくばgulpと打つだけで終わることに魅力を感じるのではないのでしょうか？また、僕の現場ではフロントエンジニアとデザイナーさんとの作業環境を連携することで、より作業がはかどりました。

処理をみんなで共有する

処理の設定ファイルを開発メンバーで共有することによって、メンバー全員が同じタスクをすることになります。
scssのコンパルの仕方や、圧縮の仕方など人によって制作物がバラバラになることはなくなります。

メリットを簡単に言うと

• 余計な作業に気を使わないので、開発に集中できる
• 納品ファイルが開発者の環境によって変わることがない
• ミスも減り、時間の節約

デメリットと学習コスト

導入と学習コスト
node.js, Gulpの導入とタスク処理を記述する必要があります。
Gulpではnode.jsで動いていて、設定項目はgulpfile.jsというファイルにjavascriptで記述するので多少javascriptの知識は必要です。
node.jsとGulpの導入はコマンドを数回叩くだけで終わります。
簡単な処理のみなら、必要なjavascriptの知識は

• 変数の宣言の書き方(var など)
• 演算子
• 配列の書き方
• 関数の書き方、引数の書き方

さえ知っていれば大丈夫です。これは、本当に基礎の基礎です。
おそらく、javascriptをゴリゴリ書くのは無理だけどjqueryのプラグインとかいれるよーって人は大丈夫だと思います。
「なんか、難しそうやな(´-ω-｀)」と思っていた人もとりあえずやってみたら
「あれ、やることこんだけ？？(；・∀・)」と感じる人が多い印象です。

仕様変更
たびたびGulpの仕様が変更されます(最近ではrunがDeprecatedになりました)非推奨なら目をつぶれるのですが、将来的に削除される可能性が高いのでどこかで対応する必要があります。Gulp本体だけでなく、プラグインの仕様変更もモノによれば頻繁に行われます。有名なプラグインなら比較的安定しているのですが、絶賛改善中のプラグインはその対応に追われます。

Gulpを使ったら幸せになれるタイプ。ならないタイプ

個人的な意見としてはほとんどの人が作業の効率化を実感すると思います。
ですが導入してみた結果、それほど幸せになれないタイプがあることもわかってきました。

導入しても幸せになれないタイプ

• 画像の圧縮、cssの圧縮もする必要がない環境で、cssとhtmlと簡単なjqueryしか使わないよーって環境のタイプ。
• 使ってもscssのコンパルだけなので、watchしたら終わりだよーってタイプ。
• よくわからないプラグイン使って、なにかエラーがあったら大変じゃないかと激怒するタイプ。
• npm scriptだけで快適だから余計なのいらないよーってタイプ。

全ての人が何倍もコーディングが早くなるわけではない

上記の通り、Gulpはコーディングを補助してくれるツールであって、コーディングを肩代わりするものではないです。cssとhtmlだけのコーディングならGulpを使っても、コーディングの速さは変わりません。むしろ、設定にかける時間を考えると遅くなる可能性もあります。

絶対必要なものではない。けど気になるなら導入してみて損はない。
今、何の支障もなく作業できているならそれで問題ないです。無理に不慣れなツールを入れる必要もありません。また導入するするにしても、Gulpの全容を理解する必要もありません。自分の作業を楽にするなっと思えるものだけ、都合よく使うという軽いスタンスで大丈夫です。
「Gulpを使うなら、マスターしないと(ﾉ´□｀)ﾉ」
と思う必要もありません。もしかすると、すぐにもっと便利なツールできるかもしれませんよねｗ

javascriptのことよくわからないけど大丈夫なの？

基礎さえ知っていれば、ネットに落ちているコードをコピペだけ
プラグインのドキュメントを見てもらえれば、サンプルも掲載してるので、パスの指定の仕方などを理解するとコピペだけで終わることが多いです。
参考：gulp-sass
www.npmjs.com
ただjavascriptはこれっぽちもわからないんだよ( ；∀；)という方は、jqueryなどを使う時に不便だと思うので、基礎だけ覚えても決して損ではないと思います。
ドットインストール
変数、演算子、配列の書き方、関数の書き方の知識が必要です。これは、全く難しいものではありません。へえ、そういうものなんだ(・o・)程度に理解するだけで十分です。
さらに、確認用にconsole.log()の使い方も知るとなお効果的！
もちろん、javascriptを自在に扱うことでより自分好みのタスクを処理することができます。

Gulpを触ってみよう！！

実際にGulpを導入～簡単なタスク処理までをしてみたいと思います。
小生開発環境がwindowsなので、Macのも記載しますがやってみてだめだったらググってくださいm(__)mまた、コマンドプロンプトはターミナルに置き換えて想像してください。

node.jsを導入

Node.jsでnode.jsをインストールしてください。推奨版で大丈夫です。
インストールしたら、確認のためにコマンドプロンプトで

node -v

と打ってくだい。正常にインストールされていれば、v(バージョン名)と返ってきます。

windowsの場合パスを通さないとエラーが起こる可能性があるようです。node.jsのパスを通してあげてください。

package.jsonの設置

作業フォルダを作成します。
windowsの方で、ディレクトリ名が日本語になるとsassなどのコンパイルにエラーが起こったりするのでC:の直下に置くことをオススメします。
ではCの直下にgulptestフォルダを作成しました。
コマンドプロンプトでこのフォルダに移動します。

cd C:\gulptest

次にpackage.jsonの作成です。上のコマンドに続けて次を打ってください。

npm init

いろいろ英語がでてきて
name: (gulptest)
とか出てきます。これは、package.jsonの設定を聞かれているので、終わるまでEnterを連打。(nameが空の場合はgulptestと入れてください。)
これでpackage.jsonの設置は完了しました。

npmとかpackage.jsonって何！？

npmはNode Package Managerの略で、パッケージの管理をします・・・ってわからん(爆)
簡単に言うと、node.jsで導入できるプラグイン(パッケージ)をいろんな人やコミュニティーが開発しています。そのパッケージを一括管理しているのがnpm。jQueryなどもnpmからインストールできます。インストールされたパッケージはnode_modulesに保存されます。
package.jsonは環境管理ファイルです。jsonで記述され、npmでそのディレクトリにどんなパッケージをインストールしてるかを管理したりします。他にもいろいろできることはあるのですが、今必要な知識をざっくり言うとこんなところだと思います。
package.jsonは環境などを管理してるのでメンバーがnode.jsをインストールしていれば、このpackage.jsonだけ渡してnpm installとコマンドを打つだけでパッケージのバージョンも同じものが全てインストールできます！！

Gulpのインストール

Gulpをインストールします。Gulpはnpmによって管理されてますので、npmからインストールしましょう。まず、グローバルにインストールします。(Macはsudoが必要かも？)

npm install -g gulp

package.jsonでgulpを管理し、同じバージョンのgulpを使いたいので、ローカルにもインストールします。

npm install --save-dev gulp

--save-devをつけることによって、gulpをローカル(gulptestのnode_modules)に保存し、package.jsonに自動的にパッケージの情報を追記してくれます。package.jsonを確認すると

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

のように追記されていることがわかります。他のパッケージなどは、install --save-devでローカルにだけ保存すれば大丈夫なのですが、稀にGulpのようなグローバルにインストール必須なパッケージも存在します。
「グローバル読みにいくならローカルに保存する意味ないじゃん。共有できないじゃんΣ(ﾟДﾟ)」と僕のように思った人。安心してください。GulpはローカルにもGulpが存在していれば、そっちを呼ぶ設定になってますε-(´∀｀*)ﾎｯ

ベンダープレフィックスを自動でつけよう！(gulpfile.jsの作成)

gulptest直下にsrc/app.cssを作成します

h1{
  transform: translate(100px);
}

www.npmjs.com
autoprefixerをインストールします。上記ドキュメント通りにインストールしましょう。

npm install --save-dev gulp-autoprefixer

gulpfile.jsを作成し、タスクの処理を記述します。
gulp-autoprefixerのドキュメントのusageを見ます。ドキュメントではes6(新しいjavascriptの書式)で書かれてますので、今まで通りのjavascriptの記述でgulpfile.jsを作成します。

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('prefix', function(){
  gulp.src('src/app.css')
      .pipe(autoprefixer({
        browsers: ["last 4 versions"],
        cascade: false
      }))
      .pipe(gulp.dest('dist'));
});

require(プラグイン名) プラグインのロード
gulp.task('タスク名', function(){ 内容 }) タスクを名前とともに指定
gulp.dest('出力先のフォルダ') 処理した内容を出力
下のコマンドを打って下さい。

gulp prefix

distフォルダに、app.cssができるので確認するときちんとベンダープレフィックスが付与されていると思います！！もう、これでベンダープレフィックス問題に悩まされることがない( ；∀；)

それでは、src以下のcssが更新したら自動的にベンダープレフィックスを付けたファイルをdistに生成し、めんどくさいのでgulpと打つだけで起動するようgulpfile.jsを変更します。

var gulp = require('gulp');
var autoPrefixer = require('gulp-autoprefixer');

gulp.task('prefix', function(){
  gulp.src('src/**/*.css')//srcの全てのcssに適用
      .pipe(autoPrefixer({
        browsers: ["last 4 versions"],
        cascade: false
      }))
      .pipe(gulp.dest('dist'));
});

//watchで更新を検知
gulp.task('watch-prefix', function(){
  gulp.watch('src/**/*.css', ['prefix']);
});

//gulpだけ打つと、defaultのタスクが実行されます
gulp.task('default', ['prefix', 'watch-prefix'], function(){
  console.log('default!!');
});

これで、src/app2.cssなどを作成したり、編集したりしてください。distファイルがきちんと反応してるのがわかると思います。

autoprefixerの設置が完了しました。
他にも、compassのコンパイル、圧縮系、ブラウザのリアルタイムリロード系などいろいろ便利なプラグインがあります！
watchとかは、google先生に聞くとそのプラグインに関する情報が落ちてると思いますので、それを参考にしてください。

実際Gulpを導入し開発して思ったことなど

Gulpは本当に便利です！今では作業フォルダをworkspace、納品ファイルをpublicにして自動的に納品ファイルを作成しています。
一方使ってみて思うのが便利だけど、自動化しない方がいいタスクも存在するとういことがわかってきました。例えば、React.jsとwebpackを使って開発するときに、Atomのautosave機能を使うと、フォーカスが外れると毎回重いコンパイルが実行される。webpackを利用する場面が多くなってきたので、最近はもっぱらnpm run scriptで済ましてしまいます。es-lintもatomならプラグイン入れると、リアルタイムでチェックしてるしね。
また、デメリットでも書いたようにプラグインの仕様の変更がめんどくさいのと、まったく親切じゃないドキュメントの存在、同時に使うと不具合のあるプラグインがあることといった問題にもちょこちょこ直面します。
そんな流れもあって、Gulpってあんまり必要ないんじゃね？という話がフロントエンジニアの中で議論が起こるのもなんとなくわかる・・・
最近では、コーディング補助ツールとしてGulpを利用しています。これからは、フロントエンジニアよりもむしろコーディング担当のデザイナーさんにとってかなり便利なツールというポジションになる気がします。