Gulpfile保存后JS/CSS编译成功但前端不更新，需重启服务器

核心原因 #

这种情况大概率是浏览器缓存未清除、Gulp监听任务没配置自动刷新，或是开发服务器和Gulp的文件同步机制脱节导致的。

具体解决步骤 #

1. 给Gulp加BrowserSync实现自动刷新 #

如果你的Gulpfile没集成BrowserSync，就算文件编译好了，浏览器也不会主动刷新。直接添加这段代码：

const browserSync = require('browser-sync').create();

// 启动本地服务器并监听刷新
function serve() {
  browserSync.init({
    server: {
      baseDir: './dist' // 替换成你的实际输出目录
    }
  });

  // 监听源码变化，编译后自动刷新浏览器
  gulp.watch('./src/js/**/*.js', gulp.series('js', browserSync.reload));
  gulp.watch('./src/css/**/*.css', gulp.series('css', browserSync.reload));
  gulp.watch('./src/**/*.html', browserSync.reload);
}

// 把serve设为默认任务，启动时自动执行编译+服务器
exports.default = gulp.series('js', 'css', serve);

2. 核对文件路径是否匹配 #

• 检查Gulp的输出目录（比如dist/js）和HTML里引用的资源路径完全一致，别出现源码路径和编译路径混用的情况。
• 确认开发服务器读取的是Gulp的输出目录，而非源码目录。

3. 清除浏览器缓存 #

开发时浏览器会缓存旧资源，两种解决办法：

• 打开浏览器开发者工具的Network面板，勾选「禁用缓存」（刷新时保持工具打开才生效）。
• 给编译后的文件加哈希后缀，彻底避免缓存：

const rename = require('gulp-rename');
const rev = require('gulp-rev');

function js() {
  return gulp.src('./src/js/*.js')
    .pipe(uglify()) // 保留你的原有编译逻辑
    .pipe(rev()) // 给文件名加哈希，比如app.js变成app-xxxx.js
    .pipe(gulp.dest('./dist/js'))
    .pipe(rev.manifest()) // 生成哈希映射文件
    .pipe(gulp.dest('./dist'));
}

注意：使用哈希后要配合gulp-rev-replace插件替换HTML里的旧引用路径

4. 检查Gulp监听任务是否正常工作 #

• 单独运行gulp watch（如果有这个独立任务），修改源码后查看控制台是否有编译日志，确认监听路径没有写错（比如别把src/js写成src/scripts）。

5. 同步yarn dev服务器和Gulp的目录 #

如果yarn dev启动的是独立服务器（比如Webpack Dev Server），要确保它监听Gulp的输出目录变化，或者把Gulp的编译任务整合到yarn dev的启动流程里（比如在package.json的scripts里改成"dev": "gulp && webpack-dev-server"）。

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