MEGUMI

sass watchでエラー時にコンパイルを停止させず、通知を出す方法

gulp watch

こんにちはー、メグミです。
前回のエントリーでは、node.jsとgulpを使ったSassの導入方法についてまとめました。

はじめてのSass!WebデザイナーのためのSass導入方法まとめ

 

同じ環境でSassを利用している人の中には、Watch機能を使ってファイルの更新を監視してるよーって人もいるのではないでしょうか?

でもWatch機能を使っていると、記述ミスなどでタスクが停止してしまった際、気づかずにそのままコーディングを続けてしまうことがありますよね。

また、気づいたとしてもいちいちgulpコマンドを入力し直すのは面倒だったり。。

ということで、今回はそんな手間を省いてくれるgulpのプラグインを2つご紹介したいと思います!

 

必要なパッケージをインストールしよう

まずは必要なパッケージをnpmでダウンロードします。

① gulp-plumber

sassのコンパイル中にエラーが起きてもWatch機能を停止させずにタスクを継続してくれるプラグインです。
コマンドラインを起動して、以下のコマンドをプロジェクトフォルダ内で打ち間違いのないように入力してください。

 

② gulp-notify

こちらはコンパイル中にエラーがあった場合、通知を出してくれるプラグインです。
同じくプロジェクトファイル内で以下のコマンドを入力してください。

 

 

gulpfile.jsを編集しよう

前回のエントリーではsassをcssにコンパイルするのに必要なタスクを記述しました ↓

それに追加する形で以下のコードを.pipeで繋げ、記述してください。

これで下準備は完了です。

 

 

実際にコンパイルして動作を確認しよう

ではでは、本当にエラー通知が出るのか動作確認をしてみましょう。
プロジェクトフォルダ内で下記コマンドを入力し、ファイルの更新をWatchします。

次に、sassフォルダ内に記述ミスのあるSassファイルを作成して保存してみましょう。
(ハイライトしている行が記述ミスの部分です。)

 

すると、PC画面右上にエラー画面が表示されるようになりました。

エラー通知

 

また、コマンドラインを確認してもタスクが継続されているのがわかります。

コマンドライン

 

 

最後に

いや〜、これで手間が省けてSassがより便利に使えるようになりますね。

gulpでSassを使っている方はぜひ今回の記事を参考にし、Watch機能を強化してみてください。

ではでは(o´・ω・`o)ノシ