gulp-watch
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
anymatch | 1.1.0 | 2.81 kB | ISC | prod | 3 |
chokidar | 1.7.0 | 22.33 kB | MIT | prod | 8 2 |
glob-parent | 1.3.0 | 1.83 kB | ISC | prod | 1 |
gulp-util | 3.0.8 | 5.36 kB | MIT | prod | 3 1 |
is-glob | 1.1.3 | 1.93 kB | MIT | prod | |
readable-stream | 1.1.14 | 20.15 kB | MIT | prod | |
vinyl-file | 1.1.1 | 2.12 kB | MIT | prod | 1 |
vinyl | 0.4.6 | 3.89 kB | MIT | prod |
In the dynamic world of web development, 'gulp-watch' serves as an unending stream file watcher that makes use of the supremely speedy chokidar while emitting vinyl objects. It keeps a keen eye on files provided by a specific pattern or 'glob' and emits an event every time the file is added, changed, or removed.
To get things working with 'gulp-watch', you'll need to follow a few straightforward steps. First, install the package through npm by running npm install --save-dev gulp-watch
in your terminal. You'll then require both 'gulp' and 'gulp-watch' in your script file. Define gulp tasks that return the 'gulp-watch' function, providing it with the path of the files you want to watch as the first argument, and specifying a function of what to do whenever a change is detected.
Here's a simple code example:
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('stream', function () {
// Endless stream mode
return watch('css/**/*.css', { ignoreInitial: false })
.pipe(gulp.dest('build'));
});
gulp.task('callback', function () {
// Callback mode
return watch('css/**/*.css', function () {
gulp.src('css/**/*.css')
.pipe(gulp.dest('build'));
});
});
Notice there are two modes of utilization: 'stream' mode which creates an endless stream, and 'callback' mode that is particularly practical if any plugin in the pipeline depends on the end
/flush
event.