gulp.js その1 概要・基本


本家サイト：[gulp.js](http://gulpjs.com)


## Grunt でなく gulp を使う理由

自動化するタスクを登録する設定ファイルを見比べると、gulpの方がはるかにすっきりしていて可読性高い。
新参のgulpはGruntに比べるとプラグインが少ないが、人気があるので今後充実していくだろう。
ルール等をきっちり決めるチーム運用の場合は、Gruntの方が良いらしい。
下記の記事が参考になった。

* [Gruntとgulpを比較 〜 JSおくのほそ道](http://qiita.com/setzz/items/badaee6d0de448ba9770)
* [ビルドツールまとめ。GruntとかGulpとか (フロント寄り)](http://qiita.com/cognitom/items/db88babebeb869a4a198
)
* [Build Wars: Gulp vs Grunt（スライド）](http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/#1)


## gulp でできること

プラグインを追加することで、様々な処理を自動化できる。例えば…

* Webサーバー/ライブリロード（gulp-connec）
* ライブリロードのみ（gulp-livereload）
* Sass、Compass、CoffeeScript、Jadeなどのコンパイル
* HTMLからJade,markdown,プレーンテキストに変換（gulp-html2xxxx）
* CSS中に点在したメディアクエリーをまとめる（gulp-combine-media-queries）
* CSSベンダープリフィックスの管理（gulp-autoprefixer）*指定で[エラーが出るらしい](http://www.anothersky.pw/2014/02/testing_gulpjs.html)
* CSSプロパティ並び順整理（gulp-csscomb）
* コードの連結（gulp-concat）
* コードの圧縮（gulp-minify-html,）
* コードの整形（gulp-prettify,）
* CSSスプライト生成
* 画像圧縮（gulp-imagemin）
* markdownをPDFに変換（gulp-markdown-pdf）
* 画像サイズ変換（gulp-image-resize）
* コード構文チェック Lint
* ファイル書き出し
* 圧縮/解凍（gulp-zip,gulp-unzip,gulp-untar）
* FTPアップロード（gulp-ftp,gulp-sftp）
* 文字コード変換
* 実体参照変換（gulp-entity-convert）
* DataURI化（gulp-base64,gulp-css-base64,gulp-data-uri）
* Bower（gulp-bower-files）
* JSON,YAML,XML,PLIST,CSV の相互変換（gulp-convert,gulp-csv2json,gulp-xml2json）
* HTMLテーブルをCSVに変換（gulp-table2csv）
* サイトマップ作成（gulp-sitemap-files）
* sitemap.xml生成（gulp-sitemap）
* 通知センターに通知（gulp-notify）
* Webページのスクリーンショット撮影（gulp-webshot）
* Angular関連


## インストール

グローバルへのインストール ★★要/不要？
`npm install -g gulp`

プロジェクトへのインストール（今いるディレクトリ内で）
`npm install gulp` 

`gulp -v` でバージョンが表示されたらO.k.

## 使ってみる

### 管理したいプロジェクトにgulpをインストール

テスト用にプロジェクトディレクトリとして gulp_test ディレクトリを新規作成
ターミナルで gulp_test に移動、gulp をインストール
`npm install gulp`
gulp_test/node_modules/gulp ディレクトリ内に、インストールされる

### タスクの作成と実行

gulp_test ディレクトリ内に、設定ファイル"gulpfile.js"を作成。以下記述をし保存

```gulpfile.js
var gulp = require('gulp');

//デフォルトタスク
gulp.task('default', function() {
  console.log("デフォルトタスクが実行されたよ");
});

//test1タスク
gulp.task('test1', function() {
  console.log('test1タスクが実行されたよ');
});

//test2タスク
gulp.task('test2', function() {
  console.log('test2タスクが実行されたよ');
});
```

gulp_test ディレクトリ内で、
`gulp default` または `gulp` で、'default'タスク実行
`gulp test1` で'test1'タスクの実行
`gulp test2` で'test2'タスクの実行
`gulp test1 test2` で'test1'タスクと'test2'タスクの実行


### ファイルを監視させる

Sass,LESS,CoffeeScript,Jadeのコンパイルや、エラーチェック、コード圧縮など、ファイルの変更保存時にさせたい処理は多い
ここでは、監視するファイルとして style.scss を作成
以下gulpfile.js にファイル監視させるタスクを書いてみる

```gulpfile.js
var gulp = require('gulp');

//ファイル監視
gulp.task('watch', function() {
  gulp.watch('style.scss', function(event) {
    console.log('ファイルが変更されたよ');
  });
});
```

`gulp watch` で 'watch'タスク実行。style.scss の監視を続ける。
エディタで style.scss を変更して保存すると、'ファイルが変更されたよ'と標準出力される。


### タスクにタスクを登録

タスク内にタスクを組み込むことができる
処理の分離でコードの見通しが良くなり、タスクのセットを自在に組むことができる

`gulp` または `gulp default` で 'test1','test2','watch' を並列処理
`gulp test` で 'test1','test2' を並列処理
`gulp test1` で 'test1' のみ実行

```gulpfile.js
var gulp = require('gulp');

//test1タスク
gulp.task('test1', function() {
  console.log('test1タスクが実行されたよ');
});

//test2タスク
gulp.task('test2', function() {
  console.log('test2タスクが実行されたよ');
});

//ファイル監視
gulp.task('watch', function() {
  gulp.watch('style.scss', function(event) {
    console.log('ファイルが変更されたよ');
  });
});

//デフォルトタスク
gulp.task('default', ['test1','test2','watch']);

//test1,test2タスクをまとめたタスク
gulp.task('test', ['test1','test2']);
```


## ツール

* [Gulp Fiction](http://gulpfiction.divshot.io/#/53f10f5a-2713-4218-a2a4-aaceb3bb0acf) gulpfile.jsをGUIで作成できるWebサービス
* [gulp.js チートシート](http://qiita.com/cognitom/items/e542e6601ab6af8b6e1e) わかりやすい


## 参考サイト

* [gulp - Qiita](http://qiita.com/tags/gulp)
* [タスクランナーgulp入門 - to-R](http://blog.webcreativepark.net/2014/05/12-183033.html)
* [gulpをよく使うけど、よくわかってないので勉強するよ - Qiita](http://qiita.com/shirataki-fatman/items/3aeaa63c705caeb723aa)
* [打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ - OpenWeb](http://openweb.co.jp/2013/12/26/打倒grunt！node-js用の新たなビルドシステムgulpことはじめ/)
* [ビルドツール「gulp.js」を使ってみる - Monster Dive](http://www.monster-dive.com/blog/web_creative/20140131_001108.php)
* [【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。](http://dev.classmethod.jp/tool/gulpjs-part-001/)
* [Grunt.jsからgulp.jsに宗旨替えした - isoden.me](http://isoden.me/blog/2014/05/06/gulpjs/)
* [Gruntfile.js が長すぎてつらい人は gulp を使ってみよう](http://qiita.com/shuhei/items/4aaa550d1ad30d2fc3b5)
* [Gruntとgulp.jsでサイトパフォーマンスを向上させる](http://wazanova.jp/items/1128)
* [gulpとnode.jsの連携](http://blog.webcreativepark.net/2014/05/13-112904.html)
* [gulpでJavaScriptの結合圧縮処理](http://blog.webcreativepark.net/2014/05/16-145818.html)
* [Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」](http://blog.webcreativepark.net/2014/05/14-112523.html)
* [Livereload magic, Gulp style! | Rhumaric, pixel distiller](http://rhumaric.com/2014/01/livereload-magic-gulp-style/) Live Reload with Express
* [Gulp as a Development Web Server - Tuts+ Code Tutorial](http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903) gulpでWebサーバー
* [打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ | OpenWeb](http://openweb.co.jp/2013/12/26/%E6%89%93%E5%80%92grunt%EF%BC%81node-js%E7%94%A8%E3%81%AE%E6%96%B0%E3%81%9F%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0gulp%E3%81%93%E3%81%A8%E3%81%AF%E3%81%98%E3%82%81/)

### Grunt

自動化処理や管理の参考用に

* [Grunt 本家サイト](http://gruntjs.com)
* [Gruntで開発用と公開用のディレクトリを分ける - Border/memo](http://brdr-mmrndm.tumblr.com/post/74051093689/grunt)
* [grunt + bower で一気に環境構築](http://dev.hageee.net/22)
* [Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 - WWW Watch](http://hyper-text.org/archives/2014/01/grunt_quick_start_for_web_designer.shtml)
* [Webサイト・フロントエンドの高速化とgrunt.jsについて - slideshare](http://www.slideshare.net/tomof/webgruntjs)
* [Gruntで始めるWeb制作の自動化 - toR](http://blog.webcreativepark.net/2013/08/28-010250.html)
* [Gruntを使ったプロジェクトの自動化。もうCodeKitもMAMPもいらないよ。- 5 LOG](http://5log.jp/blog/grunt/)
* [Gruntで効率化！ リリース前の面倒な作業をまとめる](http://www.monster-dive.com/blog/web_creative/20140110_001102.php)