Gulp配置教程：运行HTML文件夹详解

想用 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 页面。