How to use the gulp.watch function in gulp

function serve(path) {
    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: path,
            index: "index-dev.html"
        }
    });

    gulp.watch("index-dev.html").on("change", reload);
    gulp.watch("partials/*.html").on("change", reload);
    gulp.watch("js/*.js").on("change", reload);
    gulp.watch("codemirror/*").on("change", reload);
    gulp.watch("nomnoml/*").on("change", reload);
    gulp.watch("css/*.css").on("change", reload);
}

gulp.task('watch', function () {

  // watch JavaScript files
  gulp.watch(scriptSourceFiles, ['process-scripts']);

  // watch test files and re-run unit tests when changed
  gulp.watch('test/**/*.js', ['test']);

  // watch main scss file
  gulp.watch(styleSourceFiles, ['build-styles']);

});

// Start livereload server
  livereload.listen({
    reloadPage: "Extension",
    quiet: !args.verbose,
  });

  gutil.log("Starting", gutil.colors.cyan("'livereload-server'"));

  // The watching for javascript files is done by webpack
  // Check out ./tasks/scripts.js for further info.
  gulp.watch("app/manifest.json", ["manifest"]);
  gulp.watch("app/styles/**/*.css", ["styles:css"]);
  gulp.watch("app/styles/**/*.less", ["styles:less"]);
  gulp.watch("app/pages/**/*.html", ["pages"]);
  gulp.watch("app/_locales/**/*", ["locales"]);
  gulp.watch("app/images/**/*", ["images"]);
});

gulp.task('default', tasks, () => {
  livereloadStart();
  const watcher = gulp.watch('./source/**/*.js', tasks);
  watcher.on('change', (gulpEvent) => {
    setTimeout(() => {
      notifyLivereload(gulpEvent);
    }, 2000);
  });
});

gulp.task('watch', function() {
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.images, ['images']);
    gulp.watch(paths.templates, ['react']);
    gulp.watch(paths.sass, ['sass']);
    gulp.watch('app.html', ['index']);
    gulp.watch('lang/*.json', ['lang']);
    gulp.watch('templates/**/*.html', ['tpls']);
    gulp.watch('../public/css/style.css', ['prod-css']);
});

], function() {
    browserSync({
        server: {
            baseDir: './'
        },
        logLevel: 'silent',
        open: 'external'
    });

    gulp.watch(['src/**/*.js', 'demo/**/*.js'], ['reload_by_js']);

    gulp.watch('src/**/*.less', ['reload_by_demo_css']);

    gulp.watch('demo/**/*.less', ['reload_by_demo_css']);

});

gulp.task('watch', ['default'], function() {
  gulp.watch(files.jshint, ['lint']);
  gulp.watch('client/scss/**/*.scss', ['inject-css']);
  gulp.watch('client/js/**/*.js', ['inject-js']);
  gulp.watch('views/includes/assets/*.pug', ['inject-js']);
});

gulp.task('css:watch', function() { 
  runAndWatch();

  gulp.watch('./public/scripts/styles.json', ['theme']);

  gulp.watch('./public/{stylesheets,scripts}/**/*.scss', ['css-only'])
    .on('change', function (event) {
      bundleLogger.rebuild(path.relative(filedir, event.path));
      if (event.type === 'deleted') {                  
        delete cached.caches.stylesheets[event.path];      
        remember.forget('stylesheets', event.path);        
      }
    });
});

gulp.task('serve-server', ['server'], function(){
  gprocess.start('server-server', 'bin/example-server', [
      '--logtostderr',
  ]);
  gulp.watch('bin/example-server', ['serve-server']);
});