始めに

Pluralsightで、Gulpについて勉強しました。

<a href="http://www.pluralsight.com/">Pluralsight – Developer, IT & Creative Training by Pros</a>www.pluralsight.com

コースはこちら

http://www.pluralsight.com/courses/javascript-build-automation-gulpjs

Gulpの基本的な部分を紹介したいと思います。

Gulp とは何か

GulpのGithubの説明によれば、

gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow.

だそうです。つまり、時間がかかる作業や何度も繰り返す作業を自動化するためのツールということのようです。 Pluralsightでは、タスクランナーとして紹介されています。特に、フロントエンド周りの開発、例えば、

Javascriptの最小化
複数のCSSファイルをひとつのファイルにまとめる
LESSやSASSのコンパイル
altJSのコンパイル

など、必須の細かなタスクの実行で威力を発揮するようです。たしかにこのようなタスクを手動でやるのは、苦痛ですね。。。

The streaming build system

GulpのGithubには、「The streaming build system」と書いてあります。これは、Gulpのコンセプトを一言で表しています。

Gulpは、

ファイルを読み、
なんらかの変換をして、
書き出す

というシンプルな仕組みを提供します。

Gulpをインストールする

まず、node.jsが必要ですので、node.jsをインストールします。

Node.js

インストーラからnode.jsをインストールすれば、npmも使えるはずですので、npmを使ってGulpをインストールします。 ※パッケージ管理システムを使った場合はnpmは一緒に入らないかもしれません。Macportsで入れたのですが、一緒に入りませんでした。

sudo npm install-g gulp

そして、特定のプロジェクトフォルダで、ローカルインストールをする必要があります。 gulpを使うフォルダで、

sudo npm install gulp

これでインストールは終了です。

Gulpの4つのAPI

Gulpの良い点はたった４つのAPIを学べば使いこなせるということだと思います。

gulp.task
gulp.src
gulp.dest
gulp.watch

gulp.task(name,[,dep],fn)

gulp.taskは文字通り、gulpのタスクを定義します。

最初の引数nameはタスクの名前です。
2つめの引数depはオプションです。これは、依存するタスク名を書きます。ここに書かれたタスクの後に、このタスクが実行されるようになります。ただし、引数depに書かれたタスクはパラレルで実行されるので注意が必要です。
3つめの引数fnは実行される処理をfunctionとして書きます。

実際にタスクを作成し、実行してみます。プロジェクトフォルダに以下の内容のgulpfile.jsというファイルを作成します。

var gulp = require('gulp');

gulp.task('hello-world',function(){
  console.log('Hello world gulp');
});

このタスクを実行するには、コマンドからタスク名を指定して実行します。

gulp hello-world

すると結果は、

[10:31:18] Using gulpfile ~/Documents/workspace/auto-glup/gulpfile.js
[10:31:18] Starting 'hello-world'...
Hello world gulp
[10:31:18] Finished 'hello-world' after 102 μs

と、Hello world gulpが出力されているのがわかります。

では次に、オプション引数のdepをつけてみます。

var gulp = require('gulp');

gulp.task('hello-world',['wakeup-gulp','good-morning-gulp'],function(){　
  console.log('Hello world gulp');
});

gulp.task('good-morning-gulp',function(){
  console.log('good morning gulp');
});

gulp.task('wakeup-gulp',function(){
  console.log('wakeup gulp');
});

ふたつのタスクを追加しました。good-morning-gulpとwakeup-gulpです。そして、hello-worldのタスクの依存タスクとして、このふたつを登録しました。['wakeup-gulp','good-morning-gulp']です。

さきほどと同じように、hello-worldを実行してみます。

gulp hello-world

結果は以下の通り。

[11:09:22] Using gulpfile ~/Documents/workspace/auto-glup/gulpfile.js
[11:09:22] Starting 'wakeup-gulp'...
wakeup gulp
[11:09:22] Finished 'wakeup-gulp' after 116 μs
[11:09:22] Starting 'good-morning-gulp'...
good morning gulp
[11:09:22] Finished 'good-morning-gulp' after 46 μs
[11:09:22] Starting 'hello-world'...
Hello world gulp
[11:09:22] Finished 'hello-world' after 32 μs

Hello world gulpが出力される前に、wakeup gulpとgood morning gulpが出力されているのがわかります。

gulp.srcとgulp.dest

gulp.srcはファイルを読み込みます。ストリームの始点です。 gulp.destはファイルを書き出します。ストリームの終点です。ストリームはpipeを使って、処理を挟むことができます。

実際に、 - jsを読み込む - 空白を取り除いて最小化する＝minifyする - minifyしたjsを書き出すということをやってみます。

まず、minifyのためのgulpのプラグインをインストールします。

npm install --save-dev gulp-uglify

そして、gulpfile.jsにタスクを定義します。

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

gulp.task('compress', function() {
  return gulp.src('./lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.src('./lib/*.js')で拡張子がjsのファイルをすべてストリームとして読み込んでいます。 .pipe(uglify())はストリームに対して、uglify()という処理を適用しています。uglify()が最小化をしています。 .pipe(gulp.dest('dist'))はストリームに対して、gulp.dest('dist')という処理を適用しています。gulp.dest('dist')はストリームをdistに保存しています。

libの中に、jquery.jsとangular.jsの最小化していないバージョンを入れて、実際に実行してみます。

gulp compress

すると、distというフォルダが作られ、jquery.jsとangular.jsの最小化されたバージョンが出力されました。

gulp.watch

gulp.watchはファイルやフォルダを監視し、変更があったらなんらかのタスクを実行します。例えば、sassのコンパイルなど、編集を検知して、リアルタイムで、出力したい場合に有用です。

ここでは、

sassフォルダを監視する
変更があったら、cssにコンパイルして出力する

というのをやってみます。

まず、sassのプラグインをインストールします。

npm install --save-dev gulp-sass

そして、sassのコンパイルをするタスクを定義します。

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

gulp.task('sass', function () {
  gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
});

gulp.src('./sass/*.scss')で拡張子がscssのファイルをすべてストリームとして読み込んでいます。 .pipe(sass())はストリームに対して、sass()という処理を適用しています。sass()がsassコンパイルを実行します。 .pipe(gulp.dest('./css'))はストリームに対して、gulp.dest('./css')という処理を適用しています。gulp.dest('./css')はストリームをcssに保存しています。

実行してみます。

gulp sass

cssフォルダが作成され、cssファイルが生成されました。

さらに、./sass/*.scssに更新(追加、変更、削除)があったら、タスクsassを実行するようにgulp.watchを使ってみます。

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

gulp.task('sass', function () {
  gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
});

gulp.task('sass-watch', function () {
  gulp.watch('./sass/*.scss',['sass']);
});

sass-watchというタスクを定義します。 gulp.watch('./sass/.scss',['sass'])は、./sass/.scssを監視し、更新があったらタスクsassを実行します。タスクは２番目の引数に配列で複数設定することができます。

実行してみます。

gulp sass-watch

監視タスクなので、コンソールは帰ってきません。実際に./sass/*.scssのscssファイルを更新して確かめてみると、cssフォルダにコンパイルされた結果のcssが出力されました。

まとめ

４つのAPIというシンプルな構成で、それを組み合わせることで、幅広いタスクを自動化できるというのが魅力的なツールという感じがします。

特に基本がシンプルなので、導入のハードルが低いです。

以下の参考情報を見ながらやれば、短い間にかなり複雑なことまでできるようになると思います。

参考

gulpのチートシート。とてもわかりやすいです。作成はosscafeさん

<a href="https://github.com/osscafe">osscafe</a>github.com

開発者によるプレゼン。モチベーションなどよくわかる。

<a href="http://slides.com/contra/gulp#/">Gulp by Eric Schoffstall</a>slides.com

TECH NOTES

Gulp 入門

始めに