gulp.js その1 概要・基本

  • 83
    Like
  • 0
    Comment
More than 1 year has 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

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