有名なビルドツール（タスクランナー）であるGruntを使ってみようとずっと思っていて放置していたら
今は同様のタスクランナーとしてgulpという方が人気のようなので、そっちを触ってみました。
はじめに（リファレンスとか）
gulpはGruntと同じくタスクランナーと呼ばれるものの1つです。
Sassのコンパイルやjsファイルの圧縮などの様々なタスクを自動で行ってくれます。
gulpはnode.jsで開発されているので、npmによりインストールできますが、
gulpそのものには上に挙げたタスクを行うための特定の機能は何も含まれていません。
自分がやりたいことに応じて、別途gulp-xxxというパッケージをnpmでインストールして使うことになります。
今回最初に参考にしたのがこちらのスライド。
このスライドでわかること
- Gruntとgulpの違い
- gulpの基本的な書き方(
gulpfile.js) - gulpでよく使われるパッケージがいくつか
このスライドを見てもわからないこと
- gulpって何に使うの？gulpで何ができるの？というタスクランナーそのものの話
- gulpの実行方法
上のスライドを一通り見てみましたが、gulpの基本構文みたいなのを書いてみることで
とりあえずどういった使われ方をするのかは理解できました。
ただし、プログラミング言語で言うところのHello Worldみたいのは書かれていなかったので
どんなことができるかは別としてとりあえず動かしてみたい、という人は他のサイトなりを参考にする必要があると思います。
（実際私はこのスライドの通りにgulpfile.jsを書いてみて、「で、これどうやって実行すんだろう？」とググってしまいました）
結局、とりあえず実行してみましょう的な話も含めて一番参考になったのは
こちらの記事でした。
ここに書いてある通りに一通り実行してみると、gulpがどんなもんかわかると思います。
インストール
gulpの公式ドキュメントにHello World的なのが書いてました。
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started
npmからgulpをインストールします。
$ npm install -g gulp
適当な作業ディレクトリ(今回は~/workspace/gulp_sample)を作り、gulpを--save-devオプションつきでローカルにインストールします。
$ mkdir -p ~/workspace/gulp_sample
$ cd ~/workspace/gulp_sample
$ npm init
$ npm install --save-dev gulp
--save-devオプションをつけて実行すると、package.jsonのdevDependenciesに依存性を記録するそうです。
devDependenciesというのは開発時にのみ利用するライブラリ、という意味だとか。（詳しいことは不明）
とりあえず動かしてみる
ディレクトリにgulpfile.jsというファイルを作成し、次のように記述します。
var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here console.log('Hello, World!'); });
保存したら、gulpコマンドを入力してgulpを実行します。すると...
$ gulp [14:39:59] Using gulpfile ~/workspace/gulp_sample/gulpfile.js [14:39:59] Starting 'default'... Hello, World! [14:39:59] Finished 'default' after 101 μs
"Hello, World!"が出力され、タスクが終了しました。
このように、基本はgulp.task([タスク名], [処理したい関数])という形で処理したい内容をタスクとして登録します。
gulpコマンド実行時にタスク名を省略した場合はdefaultというタスク名のタスクが実行されるみたいです。
また、こうして必要なタスクを登録したgulpfile.jsはレシピと呼ばれるそうです。
Sassのコンパイル
gulp-sassというパッケージをインストールします。
# ~/workspace/gulp_sampleディレクトリで
$ npm install --save-dev gulp-sass
sass/style.scssというディレクトリ＆ファイルを作り、以下を記述します。
sass/style.scss
h1 { color: red; &:hover { color: blue; } }
gulpfile.jsにタスクを追加します。タスク名は自分がわかる名前ならなんでもいいです。
gulpfile.js
var gulp = require('gulp'); var sass = require('gulp-sass'); // defaultのタスク(中略) gulp.task('sass', function() { gulp.src('sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')) });
では、登録したタスクを実行してみましょう。
先ほどとは違い、タスク名を指定します。
$ gulp sass
実行すると、cssというディレクトリと、その下にstyle.cssファイルが作成されているはずです。
基本構文を理解する
gulp.task([タスク名], [関数])
実行したいタスクを登録します。
gulp.src([ファイル指定])
そのタスクで処理の対象となるファイルを指定します。
上に挙げたように*を使ったり、!で除外するファイルを指定できたりします。
また、複数の条件を配列で渡すこともできます。
// jsファイルに対するタスクの例 // `js`ディレクトリの下の任意の.jsファイルが対象 // ただし、`min`ディレクトリの中の.jsファイルは除外する gulp.src(['js/**/*.js', '!js/min/**/*.js'])
.pipe([関数])
処理をこの関数でつなげて、最終的に1つのタスクとして実現したい処理を定義します。
gulp.dest([出力パス])
処理結果を出力するディレクトリを指定します。
おわりに
というわけで、何となく使い方とどんなことができるのかわかった気がします。
この次のステップとして、GitHubでは様々なレシピが紹介されています。
gulp/docs/recipes at master · gulpjs/gulp · GitHub
また、ひととおりやってみてから知ったんですが、CodeZineにわかりやすい記事があった...！！
まずは「gulp」を動かしてみよう！ ～セットアップとはじめてのタスク実行 (1/4)：CodeZine（コードジン）
