gulp怎么运行html文件夹_gulp运行html文件夹配置方法【教程】-html教程-PHP中文网

gulp怎么运行html文件夹_gulp运行html文件夹配置方法【教程】

爱谁谁

发布： 2025-12-02 11:12:06

原创

178人浏览过

配置Gulp结合browser-sync可实现HTML文件夹页面的自动预览与实时刷新。1. 安装gulp、browser-sync等依赖；2. 创建gulpfile.js，设置server指向html目录并监听文件变化；3. 运行gulp启动本地服务器，默认打开浏览器访问http://localhost:3000；4. 修改HTML/CSS/JS文件后自动刷新页面，提升开发效率。

gulp怎么运行html文件夹_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。