僕がGulpで使っているプラグインとnode.jsモジュール一覧

最近gruntからgulpに移行した。gruntの時はgruntプラグインで実現していた機能の一部は、gulpプラグインではなく普通のnodeモジュールを使って実現しているものもある。サンプルコードはすべてCoffeeScriptで記載している。

どんなニーズに基いているか

デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。
CoffeeScriptとSCSS/Compass好き。

とりあえず入れると便利

gulp-load-plugins

"gulp-"で始まるモジュールを自動的にrequire()してくれる。

plugins = require 'gulp-load-plugins'

# pluginsオブジェクトの下へ自動的にぶらさがる。"gulp-"は省略される
.pipe plugins.coffee()
# ハイフン付きのモジュール名はキャメルケースになる
.pipe plugins.htmlValidator { format: 'json' }

便利だが、requireによる宣言をしなくて済んでしまう為、コードがどんなプラグインに依存しているのかが把握し辛くなるデメリットがあるような気もする。お好みでどうぞ。

run-sequcne

複数のタスクを同期的に順番を指定して実行できる。タスクによってはコールバックをどこで実行するかちゃんと書いておかないと上手くいかないので注意。gruntから移行した直後は割とつっかかる。

参考：JavaScript - gulpのタスクを同期的に実行する方法 - Qiita
http://qiita.com/morou/items/d54000396a2a7d0714de

参考：CoffeeScript - Gulp でタスクを並列/直列処理する - Qiita
http://qiita.com/naoiwata/items/4c82140a5fb5d7bdb3f8

gulp-plumber

通常の挙動では、gulp.watch()で監視して実行するタスクの途中でエラーが発生すると、監視タスクを巻き込んで処理が終了してしまう。このモジュールを間に噛ましておくことで、エラー発生時でも監視タスクを維持することができる。

Gulpfile.coffee

# gulp-compassタスクにgulp-plumberを仕込む場合
gulp.task 'compass', ->
  gulp.src "./#{dir.srcSass}/*.scss"

  # gulp-plumber
  .pipe plugins.plumber {
    errorHandler: (err) ->
      @emit('end')
    }

  # gulp-compass
  .pipe plugins.compass {
    project: __dirname
    sass: "./#{dir.srcSass}"
    css: "./#{dir.srcCss}"
  }
  .pipe gulp.dest "./#{dir.srcCss}"

# watch
gulp.task 'watch', ['compass'], ->
  gulp.watch ["./#{dir.srcSass}/**/*.scss"], ['compass']

gulpプラグイン

gulp-bless

CSSのセレクタ数をチェックし、IE9の認識できる個数を越えると自動でCSSを分割する。
設計がちゃんとしていればこれを使う必要はほとんどないはずなので、
後述のgulp-stylestatsでコードの品質管理を行う方が良い

gulp-bower

bowerを実行する。後述のgulp-modernizrとセットで使い、ライブラリの構築を自動化している。

gulp-coffee

CoffeeScriptをコンパイルする。

gulp-compass

Compassを使ってSass・SCSSをコンパイルする。

gulp-csscomb

CSSの記述ルールを整形する。最近はコンパイル前のSCSSやLESSファイルにも適用できる。

gulp-html-validator

HTMLにバリデートをかけ、結果をファイルに出力する。
gulp-interceptと組みあわせると結果を直接コンソールに出せる

gulp.task 'htmlValidate', ->
 gulp.src ["#{dir.dest}/*.html"]
  .pipe plugins.htmlValidator {
   format: 'json'
  }
  # 結果をコンソールに出力
  .pipe plugins.intercept (file) ->
   json = JSON.parse file.contents.toString()
   errors = json.messages.filter (e, i, a) ->
    return e.type != 'info'
   if errors.length == 0
    console.log '@@@ HTML OK! ⊂(^ω^)⊃ @@@'
   else
    console.log '\n\u001b[31m ???====== HTML ERROR! _(:3 」∠)_ ======???'
    console.log errors
    console.log ' \u001b[0m\n' + "\n"

gulp-jekyll

Jekyllをコンパイルできるプラグイン…なのだが、筆者の環境ではなぜか動作が不安定だった。
参考リンク内のプラグインを使用しない書き方だと安定してコンパイルができた。

参考: gulpを使ってjekyllでlivereloadする - Qiita
http://qiita.com/roana0229/items/eb9735b97c78d013f344

gulp-kss-robloach

node-kssを使ってスタイルガイドを出力する。gulp-kssよりも最終更新日が新しいのでこっちを使っている

gulp.src ["./#{dir.src}/assets/**/*.scss"]
  .pipe plugins.kssRobloach {
    overview: __dirname + '/src/assets/_sass/overview.md'
    markdown: true
  }
.pipe gulp.dest "./#{dir.resources}/styleguide"

gulp-minify-css

CSSをミニファイする。gulp-useminとセットで使用している。

gulp-modernizr

Modernizrをビルドする。gulp-bowerとセットでタスクを組んだりしている。

# bower実行 + modernizrをカスタマイズ
gulp.task 'setup', ->
 runSequence('setupBower', 'setupModernizr')

# bower
gulp.task 'setupBower', ->
 plugins.bower "./#{dir.srcVendor}"
  .pipe gulp.dest "./#{dir.srcVendor}"

# modernizr
gulp.task 'setupModernizr', ->
 gulp.src "./#{dir.srcVendor}/modernizr/modernizr.js"
 .pipe plugins.modernizr 'modernizr.custom.min.js' {
    # ここにビルドオプションを記載 https://github.com/doctyper/customizr#config-file
  }
  # ミニファイをかける
 .pipe plugins.uglify()
 .pipe gulp.dest "./#{dir.srcVendor}/modernizr"

gulp-s3

AWSのS3バケットにファイルをアップロードできる。

gulp.task 's3Upload', ->
  gulp.src ["#{dir.dest}/**/*"]
    .pipe plugins.s3 {
      # 1つめの設定オブジェクトに認証情報と接続先を書く
      # gitに入れたくない場合は外部ファイル化して読み込む
      key: 'ここにキー'
      secret: 'ここにシークレット'
      # リージョン名
      region: 'ap-northeast-1'
      # バケット名
      buckets: 'hoge-bucket-name'
    }, {
      # 2つめの設定オブジェクトに、アップロード先のパスやheaderを設定。
      uploadPath: '/hoge/' # デフォルトは'/'。末尾に/がないと動作が変になるので注意
      # headerをカスタマイズできる。デフォルトのままでaclはpublic-readになる
      # header: {'key':'value'}
    }

gulp-stylestats

CSSを解析して品質管理に役立つ統計情報を出力してくれる。

作者ページ：自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ | HTML5Experts.jp
http://html5experts.jp/t32k/5743/

gulp-uglify

uglifyでJavaScriptをミニファイする。後述のgulp-useminとセットで使っている。

gulp-uncss

指定されたHTMLファイルを解析し、一度も使用されていないセレクタをCSSから削除してくれる。
一見便利そうだが、JavaScriptで後付けするクラスを除外しないと困ったことになる。
解析するHTMLはローカルファイルだけでなく、サイトのURLを指定することもできる。

gulp.src ["./#{dir.dest}/assets/css/*.css"]
  .pipe plugins.uncss {
     html: ["./#{dir.dest}/*.html"]
      # 削除から除外するセレクタを正規表現で指定できる
      ignore: ['.reset','',/^\.*__*/, /^\.is\-/, /^\.bx*/]
   }
  .pipe gulp.dest "./#{dir.dest}/assets/css"

gulp-usemin

HTMLのコメントで囲まれた複数のファイルを結合してミニファイし、
リンク先を結合後のファイルに置換してくれる。

<!-- build:css assets/css/style.min.css -->
<link rel="stylesheet" href="assets/vendor/normalize.css/normalize.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<!-- endbuild -->
...
<!--build:js assets/js/script.min.js -->
<script src="assets/vendor/bx-slider.js/jquery.bxslider.min.js"></script>
<script src="assets/js/script.js"></script>
<!-- endbuild -->

gulp.task 'htmlUsemin', ->
  gulp.src "./#{dir.dest}/*.html"
  .pipe plugins.usemin {
    css: [plugins.minifyCss()]
    js: [plugins.uglify()]
  }
  .pipe gulp.dest "./#{dir.dest}"

gulp-watch

ファイルの変更を検知してタスクを非同期に走らせる。gulp.watch()との違いは、監視タスクよりも後に生成されたファイルでも検知の対象になるところ。

gulp-yuidoc

YUIDOCを使いJavaScriptドキュメントを生成する。ドキュメントに書かれていないが yuidoc.json に相当する設定を設定オブジェクト.projectにぶら下げることができる。

gulp.task 'coffeeYuidoc', ->
  gulp.src [
    "./#{dir.srcCoffee}/*.coffee"
  ]
  .pipe plugins.yuidoc {
    # yuidoc.jsonに相当する内容
    project:
      'name': 'MY SITE'
      'version': '1.0'
      'description': 'hogehoge'
    # ファイルがCoffeeScriptの場合
    syntaxtype: 'coffee'
  },{
    # テンプレートを変更したい場合は、2つめの設定オブジェクトにパスを書く
    themedir: "#{dir.resources}/doc-templates/alloy-apidocs-theme-master"
  }
  .pipe gulp.dest "./#{dir.resources}/yuidoc"

非gulpプラグイン

browser-sync

公式サイトにgulp.task内で実行する例が記載されている：
http://www.browsersync.io/docs/gulp/

del/rimraf

grunt.jsではgrunt-cleanを使ったが、gulpではこのモジュールの使用が推奨されている。
delはディレクトリの削除に。rimrafはファイルの削除に。

del = require 'del'
gulp.task 'clean', (cb) ->
	del [
		"./#{dir.dest}"
	], cb

参考：ファイル削除にはgulpプラグインを使わない - Qiita
http://qiita.com/shinnn/items/bd7ad79526eff37cebd0

js-yaml

YAMLファイルからデータを読み込める。
設定をgulpfileから分離したい時に便利

YAML = require 'js-yaml'
fs = require 'fs'
config = YAML.safeLoad fs.readFileSync 'src/config.yml', 'utf8'
# gulp.src ["#{config.hogePath}"] みたいに使える

node-notifier

OSXの通知メッセージを出すことができる

notifier = require 'node-notifier'

  # 〜何かのタスクが終わった時
  .on 'end' ->
    notifier.notify {
      title: '成功'
      message: 'hogeタスクが完了しました!'
    }