whiskers
メニュー
blog

これからはじめる Gulp シリーズこれからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    はじめに

    この記事はGulp.js（全俺） Advent Calendar 2014です。

    前回のこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。

    gulp-plumberについて

    gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。

    gulp-notifyについて

    gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくいためエラーが発生したときにデスクトップに通知するといった使い方があります。

    gulp-plumberでエラーによる強制停止を防止する

    まずはgulp-plumberを使ってエラーの強制停止を防止してみます。

    gulp-plumberのインストール

    開発用にgulp-plumberをインストールします。

    $ sudo npm install gulp-plumber --save-dev
gulp-plumber@0.6.6 node_modules/gulp-plumber
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, minimist@1.1.0, vinyl@0.4.6, lodash.template@2.4.1, multipipe@0.1.2, chalk@0.5.1, lodash@2.4.1, dateformat@1.0.11)

    watch中のエラーを試す

    エラーの状態を簡単に試すにはSCSSのシンタックスエラーで十分です。$ gulpを実行してstyle.scssのセミコロン;を消してみてください。意図的にエラーを発生させます。

    $ gulp
[17:32:59] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[17:32:59] Starting 'sass'...
[17:32:59] Finished 'sass' after 5.53 ms
[17:32:59] Starting 'copy'...
[17:32:59] Finished 'copy' after 1.27 ms
[17:32:59] Starting 'watch'...
[17:32:59] Finished 'watch' after 7.16 ms
[17:32:59] Starting 'serve'...
[17:32:59] Finished 'serve' after 12 ms
[17:32:59] Starting 'default'...
[17:32:59] Finished 'default' after 5.71 μs
[17:32:59] Server started http://localhost:8080
[17:32:59] LiveReload started on port 35729
[17:33:12] Starting 'sass'...
[17:33:12] Finished 'sass' after 1.49 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: stdin:3: top-level variable binding must be terminated by ';'

    監視中にエラーを発生させ監視が停止しました。エラーの度に監視が停止していたら仕事になりません。gulp-plumberを導入してみます。

    gulpfile.jsにgulp-plumberを追記する

    gulp-plumberモジュールを読み込みます。

    var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');
var plumber = require('gulp-plumber'); //<-

    加えて、sassタスクのStreamにgulp-plumberを差し込みます。

    //sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(plumber()) //<-
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'))
    .pipe(connect.reload());
});

    たったこれだけです。簡単ですね。
    これで監視中にエラーが発生してもwatchが停止しないはずです。

    再び監視中にエラーを発生させる

    style.scssのエラーを一度修正し$ gulpを実行して監視状態にします。監視が開始されたら再びstyle.scssを編集して意図的にエラーを発生させます。

    $ gulp
[17:37:51] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[17:37:51] Starting 'sass'...
[17:37:51] Finished 'sass' after 7.17 ms
[17:37:51] Starting 'copy'...
[17:37:51] Finished 'copy' after 1.28 ms
[17:37:51] Starting 'watch'...
[17:37:51] Finished 'watch' after 7.23 ms
[17:37:51] Starting 'serve'...
[17:37:51] Finished 'serve' after 10 ms
[17:37:51] Starting 'default'...
[17:37:51] Finished 'default' after 5.93 μs
[17:37:51] Server started http://localhost:8080
[17:37:51] LiveReload started on port 35729
[17:37:55] Starting 'sass'...
[17:37:55] Finished 'sass' after 2.28 ms
[17:37:55] Plumber found unhandled error:
 Error in plugin 'gulp-sass'
Message:
    stdin:3: top-level variable binding must be terminated by ';'

[17:41:56] Starting 'sass'...
[17:41:56] Finished 'sass' after 2.71 ms

    gulp-plumberのおかげでエラーが発生しても監視が継続されていますね。これで作業を続けられるようになりました。

    gulp-notifyでエラーを通知する

    続いてgulp-notifyプラグインでデスクトップ通知を試してみます。いつも通りインストールします。

    $ sudo npm install --save-dev gulp-notify
Password:
gulp-notify@2.0.1 node_modules/gulp-notify
├── node.extend@1.1.3 (is@2.1.0)
├── lodash.template@2.4.1 (lodash._escapestringchar@2.4.1, lodash._reinterpolate@2.4.1, lodash.values@2.4.1, lodash.templatesettings@2.4.1, lodash.defaults@2.4.1, lodash.keys@2.4.1, lodash.escape@2.4.1)
├── through2@1.1.1 (xtend@4.0.0, readable-stream@1.1.13)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, vinyl@0.2.3, chalk@0.5.1, through2@0.5.1, dateformat@1.0.11, multipipe@0.1.2)
└── node-notifier@4.0.2 (which@1.0.7, clone@0.1.18, shellwords@0.1.0, growly@1.1.1, semver@4.1.0)

    gulpfile.jsにgulp-notifyを追記する

    gulp-notifyモジュールを読み込みます。

    var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');
var plumber = require('gulp-plumber');
var notify  = require('gulp-notify'); //<-

    sassタスクにデスクトップ通知の処理を加えます。エラーを通知したいのでgulp-plumberのerrorHandlerを使います。

    //sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>") //<-
    }))
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'))
    .pipe(connect.reload());
});

    試す：エラーを起こして通知を表示する

    それでは試してみます。$ gulpを実行しSCSSファイルでエラーを発生させてみます。

    エラー通知

    このようにデスクトップ通知が出れば成功です。 エラー内容はデスクトップ通知だけではなくコマンドラインにも表示されます。

    $ gulp
[18:19:24] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[18:19:24] Starting 'sass'...
[18:19:24] Finished 'sass' after 7.24 ms
[18:19:24] Starting 'copy'...
[18:19:24] Finished 'copy' after 1.6 ms
[18:19:25] Starting 'watch'...
[18:19:25] Finished 'watch' after 7.61 ms
[18:19:25] Starting 'serve'...
[18:19:25] Finished 'serve' after 12 ms
[18:19:25] Starting 'default'...
[18:19:25] Finished 'default' after 5.79 μs
[18:19:25] Server started http://localhost:8080
[18:19:25] LiveReload started on port 35729
[18:19:28] Starting 'sass'...
[18:19:28] Finished 'sass' after 2.7 ms
[18:19:28] gulp-notify: [Error running Gulp] Error: stdin:3: top-level variable binding must be terminated by ';'

    これで、監視も停止せず、エラーが出たときに通知を確認できるようになりました。

    まとめ

    今回はシンプルな使い方の紹介でしたがgulp-notifyはエラー通知の他にも色々と使い方があると思います。何か良いものがあればまた紹介します。明日はパスの整理とrequire-dirモジュールを使ったタスクファイルの分割について勉強します。

    シリーズ

    1. これからはじめるGulp（0）：アドベントカレンダースケジュール
    2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
    3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
    4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
    5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
    6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
    7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
    8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
    9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
    10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
    11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
    12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
    13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
    14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
    15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
    16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
    17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
    18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
    19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
    20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
    21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
    22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
    23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
    24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
    25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
    26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
    27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す

    関連記事

    Browserify と browserify-shim でグローバルオブジェクトを扱う

    • Browserify, Gulp

    Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った

    • Middleman 4, Gulp

    gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）

    • Font Awesome, Gulp, Sass

    Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル

    • Middleman 4, Gulp, Sass, Browserify

    Middleman 4 の External Pipeline（外部パイプライン）を試す

    • Middleman 4, Gulp, Browserify

    コメント・フィードバック