クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

gulp.js

gulp.js sassファイルが更新されたらコンパイルするタスクを作成する(gulp.watch)

投稿日:2018年11月4日 更新日:

ファイル更新の度にgulpコマンドを実行するのが面倒くさい!

gulpを使っているとファイル更新の度にgulpコマンドを打つのが面倒になってきます。
そんな時はgulp.watchを使ってみましょう!
gulp.watchがファイルの更新を監視して、実行したい処理を代わりに行ってくれます。

gulpって何?という人はこちらから見てくださいね。

 

今回作成するサンプル

今回はgulp.watchでsassファイルの更新を監視して、ファイルが更新されたら自動でコンパイルしてくれるタスクを作ってみます。

色々なタスクに応用できるので、これを覚えておくととても便利だと思います。

 

フォルダの準備

今回作成するサンプルのフォルダ構成は以下になります。
gulp-watch-test/src/sass/style.scssを監視して、変更があればgulp-watch-test/dist/cssへ出力します。

 

フォルダ構成

gulp-watch-test/
├ dist/
│ └ css/
├ src/
│ └ sass/
│  └ style.scss
└ gulpfile.js

style.scssの作成

内容は適当でOKです。

 

gulp-sassのインストール

まずはgulp-sassをインストールします。
毎度お馴染みのnpmコマンドを実行しましょう

 

gulp.watchのタスク作成

gulpfile.jsにタスクを作成していきます。
作成したタスクは以下の順で実行されます。

  1. defaultでgulp.watch用のタスクを実行します。
  2. gulp.watch用のタスクで、sassファイルを監視します。
  3. sassファイルに変更があるとsassコンパイル用のタスクを実行します。

defaultタスク

gulp.watch用のタスクを実行します。

 

sass:watchタスク

gulp.watchを実行します。
第1引数で監視対象ファイルを指定します。今回はsrc/sass/*.scssですね。
第2引数で監視対象ファイルが変更されたら実行されるタスクを指定します。今回はsassというタスクを実行させます。

 

sassタスク

src/sass/*.scssをファイルをgulp-sassでコンパイルしてdist/cssへ出力します。

 

gulpの実行

早速gulpを実行してみましょう!

ファイルの確認

gulp-watch-test/dist/cssにstyle.cssが出来ていればまずは成功です。
こんな感じになっているはずです。

ファイルの更新

ここからが本番ですね。
style.scssを更新してみましょう。
ファイルを保存した瞬間にコンパイルされ、style.cssが更新されていれば大成功です!

こんな感じで更新します。

 

更新結果

ではstyle.cssを確認してみましょう。
以下のように更新されていればOKです。

 

これでgulp.watchでファイルの更新を監視して自動コンパイルしてくれるタスクの出来上がりです。

gulp.watchは便利なので、是非色々なタスクに使ってみてくださいね。

-gulp.js

執筆者:

関連記事

no image

gulp.js 一番簡単なサンプルを作って覚えよう!

gulp(ガルプ)を使うことが一般的になってきました。 私も仕事でgulpを使う機会が多くなってきたので基本的な使い方を書き留めておこうと思います。 良ければ見ていってください。 gulp(ガルプ)っ …

no image

gulp.js コンパイル時にエラーになっても中断させない(gulp-plumber)

例えば、gulp.watchでsassをコンパイルするタスクを動かしていた場合、sassの記述を間違えてファイルを保存してしまうと、コンパイルエラーとなり、gulp自体が停止してしいまいます。 [cr …

no image

gulp.js XAMPP, MAMPが不要に!Webサーバを起動しよう(gulp-webserver)

ローカルでの開発環境のためにはWebサーバが必要となります。 そのためにXAMPPやMAMPをインストールして使ってきましたが、gulp用のWebサーバも準備されています。 その名も「gulp-web …


comment

メールアドレスが公開されることはありません。