Home

Index

How to use the watch function from gulp

Find comprehensive JavaScript gulp.watch code examples handpicked from public code repositorys.

gulp.watch is a function in the Gulp.js build system that watches files and directories for changes and triggers Gulp tasks in response.

gulpfile.js

GitHub: angular-dashboard-framework/angular-dashboard-framework

218
219
220
221
222
223
224
225
226
227
    'sample/widgets/*/*.html',
    'sample/widgets/*/src/*.js',
    'sample/widgets/*/src/*.css',
    'sample/widgets/*/src/*.html'
  ];
  gulp.watch(paths, ['reload']);
});

gulp.task('webserver', ['install-widgets'], function(){
  connect.server({

446

950

+ 3 other calls in file

Gulpfile.js

GitHub: donspablo/zombie

34
35
36
37
38
39
40
41
42
43
    }));
}


function watch() {
  return gulp.watch('src/*.js', gulp.series(clean, build));
}


// Generate a change log summary for this release

558

How does gulp.watch work?

gulp.watch is a function in the Gulp.js build system that watches files and directories for changes and triggers Gulp tasks in response. When you call gulp.watch, you pass in one or more file paths or glob patterns to watch, along with an array of Gulp tasks to run when changes are detected. By default, gulp.watch uses a file-watching mechanism that is specific to the operating system it is running on. On most systems, this involves watching the file system for changes using a combination of file system events and polling. When a change is detected in one of the watched files or directories, gulp.watch triggers the specified Gulp tasks. These tasks can be anything that you would normally run in Gulp, such as compiling SASS to CSS, concatenating JavaScript files, or optimizing images. gulp.watch also supports advanced options that allow you to fine-tune the behavior of the file watcher. For example, you can set options to ignore certain files or directories, delay the execution of tasks by a certain amount of time, or even debounce file change events to avoid triggering tasks too frequently. Overall, gulp.watch is a powerful tool that allows you to automate your development workflow by automatically running Gulp tasks in response to file changes. This can save you time and effort, and help you to focus on writing code rather than manually running tasks.

buildtasks.js

GitHub: mikekinsman/azuredatastudio

83
84
85
86
87
88
89
90
91
gulp.task("compile", gulp.series("compile:src", "compile:test"));

gulp.task("build", gulp.series("clean", "lint", "compile"));

gulp.task("watch", function () {
        gulp.watch([config.paths.project.root + '/src/**/*',
        config.paths.project.root + '/test/**/*.ts'],
                gulp.series('build'));
});

869

chapter7.md?plain=1

GitHub: nimoc/gulp-book

221
222
223
224
225
226
227
228
229
230

```js
var watchPath = require('gulp-watch-path')

gulp.task('watchjs', function () {
    gulp.watch('src/js/**/*.js', function (event) {
        var paths = watchPath(event, 'src/', 'dist/')
        /*
        paths
            { srcPath: 'src/js/log.js',

372

354

+ 11 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const gulp = require("gulp");
const sass = require("gulp-sass");

gulp.task("sass", function () {
  return gulp
    .src("./src/scss/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./dist/css"));
});

gulp.task("watch", function () {
  gulp.watch("./src/scss/**/*.scss", ["sass"]);
});

gulp.task("default", ["sass", "watch"]);

In this example, we first define a Gulp task called sass that compiles all .scss files in the src/scss directory and its subdirectories to CSS, and saves the output to the dist/css directory. We then define a second Gulp task called watch that watches the src/scss directory and its subdirectories for changes to any .scss file, and triggers the sass task whenever a change is detected. Finally, we define a default Gulp task that runs both the sass and watch tasks. When we run the gulp command in the terminal, Gulp compiles the SASS files to CSS and starts watching for changes. Whenever a change is made to a .scss file in the src/scss directory or its subdirectories, Gulp runs the sass task again to recompile the SASS to CSS. Overall, this example demonstrates how gulp.watch can be used to automate the process of compiling SASS to CSS, and how it can help you to streamline your development workflow.

readme.md?plain=1

GitHub: shama/webpack-stream

95
96
97
98
99
100
101
102
103
    }))
    .pipe(gulp.dest('dist/'));
});

gulp.task('default', ['build'], function() {
  gulp.watch(['src/**/*.js'], gulp.series('build'));
});

```

128

+ 3 other calls in file

gulpfile.js

GitHub: MADStudioNU/the-pulter-project

257
258
259
260
261
262
263
264
265
266
gulp.series(
  'browserSync',
  'vendor-scripts',
  'scripts',
  'styles', function () {
    gulp.watch(SITE_BASE + 'scripts/src/**', gulp.series('scripts'));
    gulp.watch(SITE_BASE + 'styles/scss/**', gulp.series('styles'));
    gulp.watch(SITE_BASE + 'versioning-machine/**/*.css').on('change', browserSync.reload);
    gulp.watch(SITE_BASE + '**/*.html', gulp.series('html'));
  })

+ 35 other calls in file

gulpfile.js

GitHub: microsoft/vscode-js-debug

324
325
326
327
328
329
330
331
332
333
334
gulp.task('default', gulp.series('compile'));


gulp.task(
  'watch',
  gulp.series('clean', 'compile', done => {
    gulp.watch([...sources, '*.json'], gulp.series('compile'));
    done();
  }),
);

236

+ 7 other calls in file

gulpfile.js

GitHub: WaiSiuKei/grid

21
22
23
24
25
26
27
28
29
  browserSync.reload();
  cb();
}


function watch(done) {
  gulp.watch(conf.path.tmp('index.html'), reloadBrowserSync);
  done();
}

gulpfile.js

GitHub: EliFullStack/festival-musica

68
69
70
71
72
73
74
75
76
77
78
79


    callback();
}


function dev(callback) {
    watch('src/scss/**/*.scss', css);
    watch('src/js/**/*.js', javascript);
    callback();
}

gulpfile.js

GitHub: dabeng/OrgChart

127
128
129
130
131
132
133
134
  browserSync.init({
    server: {
      baseDir: paths.demo
    }
  });
  gulp.watch(paths.srcFiles, gulp.series('build'));
  gulp.watch(paths.demoFiles, gulp.series('reload'));
}));

758

150

+ 3 other calls in file

chapter3.md?plain=1

GitHub: nimoc/gulp-book

74
75
76
77
78
79
80
81
82
83
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 css 任务
    return gulp.watch('css/*.css', gulp.series(['css']))
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务

372

355

+ 11 other calls in file

gulpfile.js

GitHub: sarcadass/granim.js

86
87
88
89
90
91
92
93
94

//// doc
gulp.task('buildDoc', gulp.series(['buildDoc:html', 'buildDoc:js', 'buildDoc:css']));

gulp.task('watchDoc', gulp.series('buildDoc', function() {
        gulp.watch('./docs/assets/pug/**/*', gulp.series('buildDoc:html'));
        gulp.watch('./docs/assets/js/app/**/*', gulp.series('buildDoc:js'));
        gulp.watch('./docs/assets/css/scss/**/*', gulp.series('buildDoc:css'));
}));

262

+ 15 other calls in file

gulpfile.js

GitHub: ThemeFuse/Brizy

915
916
917
918
919
920
921
922
923
924
925
926
}


function watch() {
  const cssPath = paths.editor + "/**/*.scss";


  gulp.watch(
    cssPath,
    gulp.series.apply(undefined, [
      editorCSS,
      proEditorCSS,

254

gulpfile.js

GitHub: Kong/docs.konghq.com

386
387
388
389
390
391
392
393
394
395
396
function watch_files() {
  gulp.watch(sources.content, gulp.series(jekyll, reload_browser));
  gulp.watch(sources.styles, styles);
  gulp.watch(sources.images, gulp.series(images, reload_browser));
  gulp.watch(sources.js, gulp.series(js, reload_browser));
  gulp.watch(paths.assets, css);
}


function set_dev(cb) {
  dev = true;

538

177

+ 4 other calls in file

gulpfile.js

GitHub: creativetimofficial/argon-design-system

20
21
22
23
24
25
26
27
28
29
    .pipe(sourcemaps.write(Paths.HERE))
    .pipe(gulp.dest(Paths.CSS));
});

gulp.task('watch', function() {
  gulp.watch(Paths.SCSS, gulp.series('compile-scss'));
});

gulp.task('open', function() {
  gulp.src('index.html')

449

+ 3 other calls in file

README.md?plain=1

GitHub: jwandrews/gulp-sass

30
31
32
33
34
35
36
37
38
39
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
```

You can also compile synchronously, doing something like this:

391

+ 7 other calls in file

gulpfile.js

GitHub: callmecavs/bricks.js

162
163
164
165
166
167
168
169
170
171
gulp.task('server', () => sync(options))

// watch

gulp.task('watch', () => {
  gulp.watch('src/html/**/*.html', ['html', reload])
  gulp.watch('src/sass/**/*.scss', ['sass', reload])
  gulp.watch('src/js/**/*.js', ['js', reload])
  gulp.watch('src/images/**/*.{gif,jpg,png,svg}', ['images', reload])
})

209

+ 7 other calls in file

gulpfile.js

GitHub: Monologue2/TerriaMap

131
132
133
134
135
136
137
138
139
140
141
142
);


gulp.task(
  "watch-render-index",
  gulp.series("render-index", function watchRenderIndex() {
    gulp.watch(["wwwroot/index.ejs"], gulp.series("render-index"));
  })
);


gulp.task(

+ 5 other calls in file

gulpfile.js

GitHub: EngrJakirul/ASSIGNMENT

211
212
213
214
215
216
217
218
219
220
221
    }));
}


function watchTask() {
  if (util.env.test) {
    return gulp.watch('./src/**', ['build', 'unittest', 'unittestWatch']);
  }
  return gulp.watch('./src/**', ['build']);
}

+ 9 other calls in file

gulpfile.js

GitHub: AnthonyNahas/ngx-animated-gradient

296
297
298
299
300
301
302
303
304
305
306
307
308
  gulp.watch([config.allTs, config.allHtml, config.allSass], ['build-watch']);
});


// Watch changes on (*.ts, *.html, *.sass) and Re-build library (without running tests)
gulp.task('build:watch-fast', ['build-watch-no-tests'], () => {
  gulp.watch([config.allTs, config.allHtml, config.allSass], ['build-watch-no-tests']);
});




/////////////////////////////////////////////////////////////////////////////

Other functions in gulp

Sorted by popularity

gulp.src is the most popular function in gulp (3885 examples)

Other popular packages:

Home

About