saitoxu.io

AboutTwitterGitHub

How to use Gulp "watch"

October 31, 2016

Gulp has watch method as default.

This method watches changes of specified files, and executes tasks which you want to do automatically.

Usage is below.

gulp.watch(["files you want to watch"], ["tasks you want to do"])

Let’s create task which watches the change of SCSS file and compile it by using the previous post sample.

Step 1

Fisrt, add a task to gulpfile.js.

// gulpfile.js
const gulp = require("gulp")
const sass = require("gulp-sass")

gulp.task("watch", () => {
  gulp.watch(["*.scss"], ["scss"])
})

gulp.task("scss", () => {
  gulp
    .src("*.scss")
    .pipe(sass())
    .pipe(gulp.dest(""))
})

Step 2

Next, execute the following command.

$ gulp watch

Step 3

Finally, let’s change style.scss.

You can find that scss task is automatically done as below.

[22:08:16] Starting 'watch'...
[22:08:16] Finished 'watch' after 14 ms
[22:08:30] Starting 'scss'...
[22:08:30] Finished 'scss' after 15 ms

© 2020, Yosuke Saito