Gulp无法监听Less文件变更，请求排查配置异常原因

嘿，我碰到过好几次类似的Gulp监听失效的情况，结合你给出的版本信息（Gulp CLI 1.4.0、本地Gulp 3.9.1、Node v7.7.2、NPM 4.1.2），咱们一步步来排查问题：

• 首先检查watch任务是否正确定义
  你贴的代码片段只到了// gulp compile p...，很大概率是你的watch任务没有配置完整。一个标准的watch任务应该是这样的：

  // 先确保你已经定义了编译Less的任务，比如叫"compile-less"
  gulp.task('compile-less', function() {
    return gulp.src('path/to/your/less/*.less')
      .pipe(less())
      .pipe(gulp.dest('path/to/output/css'));
  });
  
  // 定义watch任务
  gulp.task('watch', function() {
    // 监听所有Less文件的变更，触发编译任务
    gulp.watch('path/to/your/less/**/*.less', ['compile-less']);
  });
  

  这里要注意两点：监听的文件路径要精准（用**/*.less匹配所有子目录下的Less文件），触发的任务名称要和你定义的编译任务完全一致。

• 排查版本兼容性问题
  你的Gulp CLI版本（1.4.0）和本地Gulp版本（3.9.1）虽然理论上兼容，但旧版本的Gulp watch在Node v7.x上可能存在文件监听的bug。可以试试：

  • 升级Gulp CLI到和本地版本匹配的版本：npm install gulp-cli@3.9.1 -g
  • 清理依赖后重新安装：删除node_modules文件夹和package-lock.json，执行npm install

• 检查文件路径是否出错
  很多时候watch失效都是路径的锅：

  • 如果只写gulp.watch('*.less', ...)，只会监听gulpfile所在目录下的Less文件，子目录里的变更不会触发
  • 别搞混绝对路径和相对路径，确保路径是相对于gulpfile.js所在位置的

• 验证编译任务本身是否正常
  如果你的Less编译任务存在语法错误（比如Less代码写错了），第一次执行gulp会报错，但watch任务可能静默失败，导致后续变更不触发编译。先单独执行编译任务（比如gulp compile-less），看看有没有报错信息，修复语法问题后再测试watch。

• 尝试替换原生watch为更稳定的插件
  Node v7.x在部分系统上的原生文件监听可能不稳定，你可以安装gulp-watch插件替代：

  npm install gulp-watch --save-dev
  

  然后修改watch任务：

  var watch = require('gulp-watch');
  
  gulp.task('watch', function() {
    watch('path/to/your/less/**/*.less', function() {
      gulp.start('compile-less');
    });
  });
  

先从最基础的任务定义和路径问题查起，这些是最常见的触发原因~

内容的提问来源于stack exchange，提问作者Ghazanfar Mir