Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

先日ランサーズさん主催の「週末ランサーズ」に登壇させていただきました、フロントエンジニアのハカセです。

偶然にもTV取材が入っているという状態でハンズオンな勉強会をすることになり超緊張しました。以下がそのときのスライドです。

勉強会はハンズオンだったため、資料だけでは伝わらない内容を、今回のブログで補っていきたいと思います。

Gulpとは

Node.jsのStreamAPIを利用したビルドシステムです。

http://gulpjs.com/

Gruntとの違い

まとめると、以下のようになります。

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。

Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。

Gruntとの比較

Gruntと比較してのメリット・デメリットは以下のようになります。

メリット

• Gruntより設定ファイルが記述しやすい
• StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ

デメリット

• 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め
• プラグイン開発のためのドキュメントが少ない

今日のゴール

Gulp.jsを使ってコーディング作業を10倍速くする！
そんな環境を作りたいと思います。

1. Node.jsをインストール

まずはNode.jsをインストールしましょう。

Node.js

http://nodejs.org/

INSTALLをクリックしてインストーラーをDLし、インストーラーを起動してインストールします。
※他にもいろいろなインストール方法がありますが、今回はもっとも簡単な方法にしました。わかる人はbrewとか使うと良いと思います。

インストールが完了したらターミナル（コマンドプロンプト: 以外、ターミナル）を起動し、以下のコマンドを実行します。

node -v
バージョン番号が表示されれば無事にインストール完了です。
npmの準備
続いて、パッケージを管理するための準備をおこないます。これにより、同じ環境をすぐに別でも構築できるようになります。
まずは任意のところにディレクトリを作成し、ターミナルで作成したディレクトリへ移動します。今回はDocuments/blogtestというディレクトリを作りました。
cd Documents/blogtest
移動したら以下のコマンドを実行します。
npm init
すると以下のように質問が続きますので、任意の値を入力します。
$ npm init
(略...

name: (blogtest) gulptest
version: (0.0.0)
description: Gulp入門用テストプロジェクト
entry point: (index.js)
test command:
git repository:
keywords: gulp,lig
author: frontainer
license: (ISC) MIT
About to write to /Users/frontainer/Documents/blogtest/package.json:

{
  "name": "gulptest",
  "version": "0.0.0",
  "description": "Gulp入門用テストプロジェクト",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "lig"
  ],
  "author": "frontainer",
  "license": "MIT"
}

Is this ok? (yes)
ただ使うだけならEnterを押すだけでOKです。これらの設定は後で変更することができます。
すべて入力するとpackage.jsonが作られ、先ほど入力内容が記載されます。
2. Gulp.jsをインストール
次にGulpをインストールしていきます。
以下のコマンドでGulpをインストールできます。
npm install gulp -g
※Macユーザの場合はroot権限での実行を求められるのでsudo npm〜としてください。
npm install gulp --save-dev
Gulpをローカルにもインストールします。
–save-devとつけることで、このパッケージを開発用パッケージとしてインストールすることができます。
package.jsonを見るとdevDependecesにGulpが記載されています。
"devDependencies": {
    "gulp": "^3.8.8"
}
package.jsonに記載されたパッケージは次回以降、npm installというコマンドを実行するだけでインストールすることができます。

package.jsonがあれば、いつでも必要なパッケージがすぐにインストールできます。
3. gulpfile.jsの作成
準備も整ったので、Gulpの設定をおこなっていきましょう。
gulpfile.jsをpackage.jsonと同じディレクトリに作成し、以下のように記述してGulpを呼び出します。

gulpfile.js

var gulp = require("gulp");
これでgulpを使う準備ができました。
次のページ
Sassのコンパイルをしてみましょう。
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る