第5回「Gulpを導入してみよう!その3」

  • このエントリーをはてなブックマークに追加

はじめに

こんにちは!
テンダ仙台支店webデザイナーのYHです。

前回はGulpでscssコンパイルが行えるようになりました。
今回はより便利なGulpの設定をするお話です。

watchでファイルの変更を監視

前回までの状態だとsassコンパイルを行う際、その都度コマンドを入力する必要がありました。
複数のタスクを設定している場合、今のままでもそこそこ便利ではあります。
しかし、watchメソッドを使うとファイルを上書き保存する度にコンパイルを実行してくれるようになり、より効率的に作業を進められます。

なおwatchはgulpに標準で含まれるメソッドなのでインストールの必要はありません。
前回設定したgulpfile.jsの13~15行目を以下のように変更します。

今回はscssコンパイルですが、もちろん設定したタスク全てに適用できます。

watchを止めない

かっこよく言うとエラーハンドリングというやつです。

Gulpはscssコンパイルなどでエラーを見つけると、処理を中断します。
watchメソッドでタスクを自動化していると、自然と目線はエディタとブラウザを往復することになるので、エラーでGulpが停止したことに気付かないこともしばしばあります。

止まったGulpを再び動かすまでには「エラーで止まる→構文を修正→gulpを再起動→コンパイル」のような手順を踏む必要があり、これをエラーごとに繰り返すのは面倒です。
なのでこれを無視するプラグインをインストールします。

プラグインのインストールはnpmを使用します。

インストールが完了したら、gulpfile.jsへ追記します。

3行目はエラーハンドリングのためのプラグイン読み込み、10行目でタスクに追記しています。
これでエラーでGulpが止まることがなくなります。

次回は最終回です。
実際のweb制作でGulpを使って気づいたことなどを書きたいと思います。

他の記事

第1回「web制作が便利に!Gulpを知った気になれる記事」

第2回「Gulpを使ってできること」

第3回「Gulpを導入してみよう!その1」

第4回「Gulpを導入してみよう!その2」

第5回「Gulpを導入してみよう!その3」

第6回「Gulp活用 実際のweb制作では」

  • このエントリーをはてなブックマークに追加

ウェブサイト制作・ウェブアプリ開発なら

下記のお悩みがあればお気軽にご相談ください。

・ウェブサイトをリニューアルしたい
・ECサイトを新規に構築したい
・自社だけのオリジナルサービスを作りたい
・ウェブサイトを作りたいが何から始めて良いかわからない


お問い合わせ

株式会社テンダ
第5回「Gulpを導入してみよう!その3」
テンダ仙台支店
サイトトップ
支店情報
オフィス情報
取り組み
ヴィジョン
事業紹介
開発分野
開発言語
パッケージ
実績紹介
すべて
開発実績
デザイン実績
その他
採用情報
ブログ
お問い合わせ
Copyright© TENDA Co.,Ltd. All Rights Reserved.