gulp.js その1 概要・基本 #gulp

本家サイト：gulp.js

Grunt でなく gulp を使う理由

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

gulp でできること

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

Webサーバー/ライブリロード（gulp-connec）
ライブリロードのみ（gulp-livereload）
Sass、Compass、CoffeeScript、Jadeなどのコンパイル
HTMLからJade,markdown,プレーンテキストに変換（gulp-html2xxxx）
CSS中に点在したメディアクエリーをまとめる（gulp-combine-media-queries）
CSSベンダープリフィックスの管理（gulp-autoprefixer）*指定でエラーが出るらしい
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.js その1 概要・基本

Grunt でなく gulp を使う理由

gulp でできること

インストール

使ってみる

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

タスクの作成と実行

ファイルを監視させる

タスクにタスクを登録

ツール

参考サイト

Grunt