npm browser-sync搭配WAMP本地服务器无法正常工作问题求助

首先，你遇到的Cannot GET /问题，核心原因是Browser-Sync的--server选项是用来启动静态文件服务器的，无法解析PHP文件——而Codeigniter是基于PHP的MVC框架，必须依赖WAMP的Apache来处理PHP解析，所以直接用静态服务器模式肯定行不通。下面给你两种解决方案，先从你已经安装的Browser-Sync入手快速解决，再给你Gulp的分步教程。

一、直接用Browser-Sync代理WAMP服务（无需Gulp） #

这个方法最简单，不用额外工具，只需要调整命令参数：

1. 首先确认你的Codeigniter项目在WAMP中的访问地址：
   比如你把项目放在WAMP的www/ci-project文件夹下，那正常访问地址是http://localhost/ci-project（如果开启了URL重写，可能是http://localhost/ci-project/）

2. 在项目根目录打开命令行，执行以下命令：

   browser-sync start --proxy "localhost/ci-project" --files "**/*.php, **/*.css, **/*.js, **/*.html"
   

   • --proxy：让Browser-Sync代理WAMP的Apache服务器，这样所有PHP请求都会交给WAMP处理，保证Codeigniter能正常运行
   • --files：监听项目下所有子目录的PHP、CSS、JS、HTML文件，只要这些文件保存，就会自动触发浏览器刷新

3. 启动后，访问Browser-Sync给出的Local地址（比如http://localhost:3000），而不是原来的WAMP地址。现在修改项目文件并保存，浏览器就会自动刷新了。

二、使用Gulp+Browser-Sync的分步教程 #

如果想更灵活地扩展自动化任务（比如编译CSS/JS、压缩文件等），Gulp是个不错的选择，下面是针对你的场景的完整分步操作：

步骤1：初始化项目依赖配置 #

在项目根目录打开命令行，执行：

npm init -y

这个命令会自动生成一个package.json文件，用来管理项目的npm依赖，-y参数表示全部用默认配置，不用手动填写。

步骤2：安装Gulp和Browser-Sync #

执行以下命令安装开发依赖：

npm install gulp browser-sync --save-dev

--save-dev会把这两个工具添加到package.json的devDependencies里，方便后续复用。

步骤3：创建Gulp配置文件 #

在项目根目录新建一个gulpfile.js文件，粘贴以下代码：

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

// 定义Browser-Sync代理任务
gulp.task('browser-sync', function() {
    browserSync.init({
        // 替换成你的Codeigniter项目在WAMP中的访问地址
        proxy: "localhost/ci-project",
        // 监听需要自动刷新的文件类型
        files: [
            'application/**/*.php',
            'assets/**/*.css',
            'assets/**/*.js',
            '*.php'
        ]
    });
});

// 设置默认任务，执行browser-sync
gulp.task('default', gulp.series('browser-sync'));

• 注意把proxy的值改成你实际的项目访问路径
• files里的路径可以根据你的项目结构调整，比如如果你的静态资源放在public文件夹，就改成public/**/*.css等

步骤4：启动Gulp服务 #

在命令行执行：

gulp

Gulp会启动Browser-Sync代理，之后访问它给出的Local地址，修改并保存项目文件，浏览器就会自动刷新了。

一些关键注意事项 #

• 确保WAMP的Apache服务处于运行状态，否则Browser-Sync代理会失败
• 如果你的Codeigniter开启了URL重写（去掉URL中的index.php），要确保WAMP的rewrite_module已经开启，并且项目根目录的.htaccess配置正确
• 不要同时用WAMP的原始地址和Browser-Sync的代理地址访问，只有访问代理地址才能触发自动刷新

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