gulp 4 (踩坑) 任务不执行

开始使用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()
});

• 完整版
  https://github.com/zhuo-xiang/T-storage/blob/master/gulpfile.js

---

微信群大佬都在等着你

微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。