この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、清田です。
最近、フロントエンド開発においてGruntにお世話になっている方も多いかと思います。 私も日ごろ大変お世話になっています。私としては、Gruntにあまり不満はないのですが、多少体感としてちょっと遅いかなぁくらいの印象を持つくらいでした。
そんな中、タスクランナーツールとして後発ながらGulp.jsという名前を聞くようになってきたので、実際に試してみました。
Gulp.jsとは?
皆さんご存知のフロントエンド開発でタスクランナー&ビルドツールとして有名なGrunt.jsですね、弊社ブログでも何度かご紹介させていただいたかと思います。
Gulp.jsも同じく、タスクランナー&ビルドツールとしての立ち位置とのこと。
Gruntと何がちがうの?
いろいろなエントリーを拝見し以下の意見がありました。
- ビルドファイルが書きやすい
- 並列処理のため、実行速度が速い印象
今回は実際に動作するまでを試してみたいと思います。
参考url
Gulpの実行環境構築
さっそく Gulp.js をインストールして動くところまで試してみたいと思います。自分の動作環境は以下のとおりです。
- OS:windoes 7
- Node.js : バージョン 0.10.26
Node.jsのインストール
まずはベースのNode.jsを使えるようにインストールします。
windowsの場合
開発環境がwindowsの場合は、公式サイトのインストーラーからインストールすると良いかと思います。
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をインストール
先ほど作業ディレクトリから以下コマンドを実行
$ 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や、実行速度に定評があるとのことだったので今後ブログにて紹介していければと思います。