Edited at

gulp.js その1 概要・基本

More than 5 years have passed since last update.

本家サイト: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']);



ツール


参考サイト


Grunt

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