配置Gulp结合browser-sync可实现HTML文件夹页面的自动预览与实时刷新。1. 安装gulp、browser-sync等依赖；2. 创建gulpfile.js，设置server指向html目录并监听文件变化；3. 运行gulp启动本地服务器，默认打开浏览器访问http://localhost:3000；4. 修改HTML/CSS/JS文件后自动刷新页面，提升开发效率。
想用 Gulp 自动运行和预览 HTML 文件夹中的页面，不能直接“运行”HTML，但可以通过启动本地服务器并自动打开浏览器来实现。下面教你如何配置 Gulp 来监听 HTML 文件夹，实时刷新页面。
1. 安装必要依赖
确保你已安装 Node.js 和 npm，然后在项目根目录初始化 package.json：
命令行执行：
- npm init -y
- npm install --save-dev gulp gulp-webserver browser-sync
推荐使用 browser-sync，它支持热更新和多设备同步测试。
立即学习“前端免费学习笔记（深入）”；
2. 创建 gulpfile.js 配置文件
在项目根目录创建 gulpfile.js，写入以下内容：
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
// 启动本地服务器并监听 HTML 文件夹
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: './html' // 指向你的 HTML 文件所在文件夹
}
});
// 监听 html 文件变化，自动刷新
gulp.watch('./html/*.html').on('change', browserSync.reload);
});
// 默认任务：运行 gulp 就执行 serve
gulp.task('default', gulp.series('serve'));
说明： 这里假设你的 HTML 文件都放在项目下的 html 文件夹中，比如 html/index.html。
3. 运行 Gulp 查看效果
在终端执行：
- gulp
Gulp 会启动本地服务器（默认地址 http://localhost:3000），自动打开浏览器并加载 html 文件夹中的页面。当你修改 HTML 文件并保存时，浏览器会自动刷新。
4. 可选增强功能
如果你还希望监听 CSS、JS 文件，可以扩展 watch 命令：
- gulp.watch('./html/css/*.css').on('change', browserSync.reload);
- gulp.watch('./html/js/*.js').on('change', browserSync.reload);
这样整个前端开发流程就流畅了。
基本上就这些，配置一次，以后每次开发只需运行 gulp 即可快速预览 HTML 页面。
