どうもユーキです。

今年に入ってすぐgulpのバージョン4.0がリリースされました。久々のバージョンアップだったのでテンションあがりました。

そこで、今回から初心者向けにgulpの導入方法を徹底的に紹介していきます！長くなりそうなので連載していきます。せっかくなので、4.0を使っていきたいと思います。
不具合等でたら都度追記したり、記事にしていきます。

「gulpまだ使ってないよ」「もうちょいこうしたいんだけどよくわからん！」など初心者の方に向けて極力噛み砕いて解説します！

gulpってなに？

gulpは、The streaming build system（ストリーミングビルドシステム）と呼ばれるもので、フロントエンド開発の様々なタスクを自動化してくれる非常に便利なツールです。
フロントエンド開発は、HTMLやCSS、JSなどの各ファイルの最小化をはかったり、画像を圧縮したり、バリデーションをかけたり、何百何千というファイルを修正したりなど、煩雑な作業が多くあります。
gulpが登場したお陰で、それらを出来る限り自動化でき、制作や運用のスピードが上がったりコードの品質も一定以上に保ちやすくなりました。

さらに、gulpはNode.jsというサーバーサイドJavascriptというものをベースに作られており、Nodeが動く環境であれば開発が可能になりました。Node.jsに関しての詳細は今回は割愛します。

gulpが登場する前にgruntというツールがあったのですが、動作が重く、設定ファイルを書くのもなかなか大変でした。それでも当時はかなり画期的なシステムでありました。

gruntと比較すると、シンプルかつ動作も軽い、さらに複数の人と共有することが容易なため、個人制作だけでなく企業でも導入されて日々使われております。最近はむしろ導入してない企業のほうが少なくなってきてるかも？

ざっくりと説明しましたが、便利なツールということがわかったでしょうか？
次はいよいよ手を動かしながら進めて行きましょう！

導入前の準備

Macユーザー向けになってしまいますが、まずはHomebrewをインストールしましょう！

Homebrewのインストール

Homebrewとは、Macのパッケージ管理システムです。パッケージはアプリやソフトとお考えください。必要なアプリやソフトをコマンドライン一つでインストールや更新、削除がコントロールできるものです。

なにかアプリを入れるときに、App Storeにあるならそんなに手間ではないけど、ない場合はそのサイトまでアクセスして、dmgファイルダウンロードして、マウントしてインストールする、という手間がコマンド一つでできるようになってしまうというかなり便利なツールです。
まだ入れてない人はこれを機会に入れましょう！

インストールは、下記コマンドを実行するだけ。
本サイト通りにやればいいので問題ないです。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

しばらく待ってインストールがおわったら以下コマンドをうってみましょう！

brew -v

バージョンが表示されてればOKです。
これでHomebrewのインストールは完了です。

HomebrewやLinuxなどのその他パッケージツールでなにかをインストールして、きちんとインストールされてるかを確かめるときはバージョンを表示させます。

基本的によく使うコマンドは以下です。ひとまず下記覚えておけば問題ないはずです。
[package_name]のところにパッケージ名をいれてください。

# パッケージ検索
brew search [package_name]

# パッケージのインストール
brew install [package_name]

# パッケージの削除
brew uninstall [package_name]

# Homebrew自体のアップデートとパッケージのアップグレード ※コマンド2つとも実行する必要あり
brew update
brew upgrade

次に、Node.jsのインストールをするのですが、せっかくHomebrewを入れたのでNode.jsを管理できるパッケージ「nodebrew」をインストールした上でNode.jsをインストールしましょう！

nodebrewのインストール

※2018/1/18追記 ndenvでの管理をおすすめします。ndenvのインストール、使い方はこちら！

brew install nodebrew

これだけです笑

しばらく待って完了したらバージョンを確認しましょう。

nodebrew -v

バージョンとかusageとか出てきたらインストール成功です。

nodebrewで基本的につかうコマンドはこちら。

# どんなコマンドがあるか調べたい時
nodebrew help

# Node.jsのインストール可能リストを表示
nodebrew ls-remote

# インストールする ※nodebrew installもあるのですが、すっごい時間がかかるので非推奨です。nodebrew install-binaryを使いましょう！
nodebrew install-binary [version]

# ローカルにインストールされたNode.jsのリストを表示
nodebrew ls

# ローカルにインストールされたNode.jsを切り替えてつかえるようにする（そのバージョンを使えるようにする）
nodebrew use [version]

さっきよりもちょっと複雑になりましたね。
手順的には、

• ls-remoteしてその中から使いたいバージョンを選ぶ
• そのバージョンをinstall-binaryでインストール
• useで切り替えて使う

といった感じです！

Homebrewとの違いは、インストールしたら使えるようになるかどうかですね。
nodebrewは違うバージョンのNode.jsを管理するツールなので、バージョンを瞬時に切り替えられるというメリットがこれで得られます。
もちろん、homebrewでNode.jsをインストールすることもできます。がバージョン管理機能がないため、パージョンを戻したいとかのときに一回今入れてるバージョンを消して古いバージョンをインストールしてという風になり、非常に面倒です。

半年前のはv1.0だったものが今はv2.0になってる、案件Aではv1.0、案件Bではv2.0を使ってるときにかなり重宝します。

これでNode.jsが使えるようになりましたね。
gulpのインストールでnpmというパッケージ管理システムを使うのですが、nodebrewを使うことで自動的にインストールされるようになります。
homebrewでNode.jsをインストールするとnpmも別途インストールする必要があるはずなので（未確認です。すいません。）、さらに手間が省けるようになりました。

npmに関しては、gulpのインストールでお話します。

windowsの場合

詳しくはこの記事がよさそうです！nodistでNode.jsのバージョン管理

家にwindowsが無いため未検証です、すいません。
一応これでいけるはずという情報をそっと載せておきます。

• nodistをインストールする
  Macでいうnodebrew的ポジションのものです。Node.jsとnpmの管理ができます。

インストーラーをダウンロードしてインストールしてください。2018/1/17現在はv0.8.8が最新です。

あとは、利用可能なバージョンを確認して、インストールすればOKだそう。

# Node.jsのインストール可能リストを表示
nodist dist

# インストールする
nodist add [version]

# ローカルにインストールされたNode.jsのリストを表示
nodist ls

# ローカルにインストールされたNode.jsを切り替えてつかえるようにする（そのバージョンを使えるようにする）
nodist [version]

こんな感じで行けるみたいです。Windowsが手に入ったら確かめてみます！

gulpのインストール

ようやくgulpのインストールまできました。

npmについて

npmは、Node.js用のパッケージ管理システムです。Node.js上で動くモジュールやライブラリをインストールしたり、削除したり出来るものです。
これを使ってgulpをインストールします。

まずは、npmが入ってるか確認しましょう！

npm -v

インストール

では、本題のgulpインストールをやっていきます。
実は本家サイトにやり方が書いてあるのですが、これを実行してくださいだとなんのこっちゃとなるので少し解説していきます。

まずは、適当な場所にディレクトリを作りましょう。

mkdir gulp_test
cd gulp_test

作成したディレクトリ内に移動したらpackage.jsonというファイルを作ります。

npm init

いろいろでてきますが、全てエンターを押して進むだけでいいです。
そうすると、package.jsonというファイルができていると思います。

このファイルを使ってnpmのパッケージを管理されます。必要なパッケージはここに書いておくことで、次回以降別環境や他の人が試すときも一緒の環境でパッケージをインストールできるようになります。
しかもわざわざパッケージを指定すること無く、npm installというコマンドのみで記載されたパッケージが自動でインストールされるようになります。

ただ、基本的には自分で追記することはあんまり無く、npmコマンド実行時に書き込まれるようにオプションを付けて実行します。

次にgulpをインストールします。まずはこちらを実行してください。

sudo npm install gulp-cli -g

sudoをつけないとうまくいかないことが多々あるので付けておきます。

これでグローバルインストールができました。
グローバルインストールをすることで、どのディレクトリにいてもコマンドが使えるようになります。

必要なもの以外は基本ローカルインストールのみを実行します。
gulpに関しては、グローバルもローカルも必要になります。次にローカルにインストールします。

npm install gulp@next --save
npm install gulp@next -D　でもOK。短いのでこちらを使うのをおすすめします。

実行が完了すると、これでようやくgulpをインストールできました。
試しにさっき作成したpackage.jsonを開いてみてください。

"dependencies": {
"gulp": "^4.0.0"
},

こんな記述が追加されてますよね。
そうです、–saveや-Dをつけることで、package.jsonに自動的に追加され、次回からnpm installとコマンドを打つだけで勝手にインストールしてくれるようになります。

これで、インストールは完了です。一応バージョンが表示されるか確かめて見ましょう。

gulp -v

4.0.0と表示されればOKです！

gulpの使い方

gulpはタスクを作ってそのタスクを実行するので、タスクを実装していきます。

gulp-testディレクトリ内に、gulpfile.jsという名前のファイルを作成し、以下を貼り付けます。

var gulp = require('gulp'); // 先程npmインストールしたパッケージを取得

gulp.task('default', defaultTask); // gulpのタスクの指定。'default'がタスク名、defaultTaskは関数です。下に定義されてます。

// タスクの内容を実装していく
function defaultTask(done) {
console.log('Hello World!!!');
done();
}

console.logが実行されると文字を表示することができます。今回は、Hello World!!!と表示されます。
では、実際に実行してみましょう！

gulpコマンドで指定したタスクを実行します。

gulp default

gulp でもOK。defaultは引数なしで動きます。

うまくうごきましたか？これでgulpが実行できる環境が整いました！
インストール完了です！お疲れ様でした！

おわりに

準備編なので、まだ全然どうやってタスクを作っていくのかというイメージが出来てないと思います。

たくさん管理系のシステムやツールがでてきて最初はこんがらがると思いますが、使っていくうちに慣れていくので、とりあえず今はあんまり深く考え込まずさわってみましょう！

次回から本格的にフロントエンド開発の環境を整えていきます。
まずは、HTMLを出力できるようにします。pugというものからHTMLに変換できるような環境を作ります。

2018/1/31更新
投稿しました！→Pug(jade)/HTML編 その1