gulp 4 (踩坑) 任务不执行_gulp create:versioncatalog不执行-优快云博客

本文链接：https://blog.youkuaiyun.com/joy1793/article/details/104540006

本文介绍Gulp4的基本用法，包括如何使用gulp-watch监控新增文件，以及解决gulp4任务无法正常启动的问题。文章详细说明了在定义任务时如何正确使用cb()来确保任务能够顺利结束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始使用gulp4 记录几个小坑

gulp-watch

gulp.watch 可以监控新增的文件
gulp 3时代 gulp自带的watch,只能监听已经存在文件, 对于任务启动后, 新增的文件却无法监听, 需要使用gulp-watch来替换自带的watch功能.
gulp 4自带的watch已经可以监听新增的文件了

gulp 4无法启动任务

执行任务后只有 Starting 没有 Finished 且后续操作没反应
原因是已经启动的任务,没有等候手动的去结束它导致它不会结束任务, 并且也不开始下一个任务

macdeMac-mini:webpack-test mac$ gulp server
[16:59:01] Using gulpfile ~/project/debug/webpack-test/gulpfile.js
[16:59:01] Starting 'server'...
[16:59:01] Starting 'browser'...

解决方法
定义任务的时候需要在 function 中执行 cb()来结束方法

gulp.task('browser', function (cb) {
  browserSync.init({
    server: {
      baseDir: './',
      index: './index.html',
      directory: true
    },    // 访问目录，自动指向该目录下的 index.html 文件
    // proxy: "你的域名或IP"    // 设置代理
    port: 8000,
  });
  cb()
});

完成效果

macdeMac-mini:webpack-test mac$ gulp server
[16:59:01] Using gulpfile ~/project/debug/webpack-test/gulpfile.js
[16:59:01] Starting 'server'...
[16:59:01] Starting 'browser'...
[16:59:01] Finished 'browser' after 14 ms
[16:59:01] Starting 'watch'...

官方解释
gulp 官网中的异步执行
gulp 4 配置简单例子

// 监听文件 文件改变
gulp.task('watch', function (cb) {
  gulp.watch(html_path, function (cb) {
    browserSync.reload();
    cb()
  })
  gulp.watch(js_path, function (cb) {
    gulp.src(js_path)
      .pipe(babel())
      .pipe(gulp.dest('demo'))

    browserSync.reload();
    cb()
  })
  cb()
});