【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。

こんにちは、清田です。

最近、フロントエンド開発においてGruntにお世話になっている方も多いかと思います。 私も日ごろ大変お世話になっています。私としては、Gruntにあまり不満はないのですが、多少体感としてちょっと遅いかなぁくらいの印象を持つくらいでした。

そんな中、タスクランナーツールとして後発ながらGulp.jsという名前を聞くようになってきたので、実際に試してみました。

Gulp.jsとは？

Gulp.js公式サイト

皆さんご存知のフロントエンド開発でタスクランナー＆ビルドツールとして有名なGrunt.jsですね、弊社ブログでも何度かご紹介させていただいたかと思います。

Gulp.jsも同じく、タスクランナー＆ビルドツールとしての立ち位置とのこと。

Gruntと何がちがうの？

いろいろなエントリーを拝見し以下の意見がありました。

• ビルドファイルが書きやすい
• 並列処理のため、実行速度が速い印象

今回は実際に動作するまでを試してみたいと思います。

参考url

• タスクランナーgulp.js最速入門
• ビルドツールまとめ。GruntとかGulpとか (フロント寄り)

Gulpの実行環境構築

さっそく Gulp.js をインストールして動くところまで試してみたいと思います。自分の動作環境は以下のとおりです。

• OS:windoes 7
• Node.js : バージョン 0.10.26

Node.jsのインストール

まずはベースのNode.jsを使えるようにインストールします。

windowsの場合

開発環境がwindowsの場合は、公式サイトのインストーラーからインストールすると良いかと思います。

nodejs公式サイト

Macの場合

Macの場合も、公式サイトにインストーラーがありますが、Homebrewで管理されている方もいる方が多いかと思うのでHomebrewでインストールします。

まずは、Homebrewのアップデートを行い最新版に更新します。

 $ brew update

次に、Node.jsのインストールを行います。

$ brew install node

インストールが正常に完了し、以下コマンドでバージョンが確認できれば完了です。

$ node -v v0.10.26

gulp.jsのインストール

Node.jsがインストールできたので、次に本題のgulp.jsを以下コマンドでインストールします。

$ npm install -g gulp

インストールが正常に完了し、以下コマンドでバージョンが確認できれば完了です、さくっとこれましたね。

2014年6月26日追記：以下コマンド誤植のがありました。 [glup -v]との表記でしたが、正式には [gulp -v]となります。 失礼いたしました。

$ gulp -v
[gulp] CLI version 3.6.2

Gulpツール実行の流れ

実行環境が整ったので、実際に実行までの流れをご紹介してみたいと思います。 結論から言いますと、Gruntとほぼかわりません。。。

作業ディレクトリの作成

はじめに、作業ディレクトリへ移動します。

$ mkdir group && cd group

package.jsonの作成

以下コマンドで、node.js用プロジェクトファイルを作成します。いろいろ聞かれますが、各々の設定状況によって記載ください。 基本YESで大丈夫かと思います。

$ npm init

package.json

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

ここまでGruntと変わりませんね。。。

gulp モジュールのインストール

プロジェクト用のgulpモジュールをインストールします。 ここで注意点として、gulpベースモジュールのバージョン指定しないとpackage.jsonに記載されなかったので、 [gulp@3.6.2]のように@マークの後にバージョンを指定します。

• gulp:gulpのベースモジュール
• gulp-util:gulpのユティリティモジュール？（今後調べてみます。）

$ npm install gulp@3.6.2 gulp-util --save-dev

package.jsonを確認すると、更新されているのが確認できます。

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp-util": "^2.2.14",
    "gulp": "^3.6.2"
  }
}

gulpfile.jsの作成

Gruntfile.jsファイルならぬ、gulp用設定ファイルgulpfile.jsを作成します。

gulpfile.jsの作成

それでは、お約束のHello Worldを表示するタスクを実行してみたいと思いますが、 Gruntようにjson内で指定するのではなく、gulp用プラグインを呼び出し、変数に格納して使用する形のようです。

var gulp = require('gulp');
var gutil = require('gulp-util');
gulp.task('default', function(){ 
  console.log('Hello World'); 
});

ちゃんと、defaultタスクが実行されてHello Worldが表示されていますね

$ gulp
[gulp] Using gulpfile d:\xxx\xxx\gulp\gulpfile.js 
[gulp] Starting 'default'... Hello World 
[gulp] Finished 'default' after 66 μs

Gulp で Sassをコンパイルしてみる。

Hellow worldを表示するだけでは物足りないので、Sass(SCSS)をコンパイルしてみたいと思います。

• gulp-sassモジュール

開発環境へgulp-sassをインストール

先ほど作業ディレクトリから以下コマンドを実行

$ npm install gulp-sass --save-dev

package.jsonにも記載されているのを確認

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp-util": "^2.2.14",
    "gulp": "^3.6.2",
    "gulp-sass": "^0.7.1"
  }
}

ファイル構成

assetsディレクトリのscssファイルをcssファイルへコンパイルします。

gulp_dir
 ├── gulpfile.js
 ├── pakacge.json
 ├── node_modules
 └── assets 
      ├── css
      └── scss
            └── example.scss

gulpfile.jsの更新

var gulp = require('gulp');
var gulputil = require('gulp-util');
var sass = require('gulp-sass');
// Sass(SCSS)ビルドタスク
gulp.task('sass', function () { 
    // Sass(SCSS)読み込み用ディレクトリ指定
    gulp.src('./assets/scss/*.scss')
    //コンパイルメソッド実行 
    .pipe(sass())
    //コンパイル後出力ファイル先の指定
    .pipe(gulp.dest('./assets/css')); 
});

assets/scss/ディレクトリにexample.scssを作成しこのファイルをコンパイルしてみます。

// assets/scss/example.scss
.anchor
{
  color: #cc3333;
  &:hover
  {
      color: #333399;
  }
  &:visited
  {
      color: #669900;
  }
  &:active
  {
      color: #ff6600;
  }
}

gulpタスクの実行

コンソール上から、以下コマンドで登録しているタスクを実行します。

$ gulp sass
[gulp] Using gulpfile d:\xxx\xxxx\gulp\gulpfile.js
[gulp] Starting 'sass'... 
[gulp] Finished 'sass' after 4.15 ms

以下実行結果として、指定ディレクトリにファイル出力できました。

まとめ

今回はインストールから簡単なビルドまで試してみまた。 gulpは後発のビルドツールのため、 Gruntと比べてプラグイン用のモジュールはまだ少ないですが、ここ最近は開発コミュニティが活発とのことでしたので今後に期待です。

今回ご紹介しきれなかった各種APIや、実行速度に定評があるとのことだったので今後ブログにて紹介していければと思います。