More than 5 years have passed since last update.

gulp.js その1 概要・基本

gulp

Last updated at 2014-06-14Posted at 2014-06-14

本家サイト：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 Fiction gulpfile.jsをGUIで作成できるWebサービス
gulp.js チートシートわかりやすい

参考サイト

Grunt

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up