摘要：
gulp-webserver或gulp-connect都可以实现浏览器自动刷新的功能，但要想跑php服务，就需要另装插件。例如本文中的gulp-connect-php，然后再配合browser-sync一起使用，完美！......

关于自动刷新浏览器这个问题，艺灵已分享了两篇笔记：
一、gulp-webserver实现自动刷新浏览器
二、gulp-connect实现自动刷新浏览器
但始终没有解决一个问题：不支持php环境！所以这篇呢，艺灵将献上第三套方案，也是自己目前一直使用中的。看官可以根据情况来选择使用哈，反正都可以提高你的工作效率哦！

一、gulp-connect-php 启动php服务

1.1、插件地址

插件地址：www.npmjs.com/package/gulp-connect-php

不知道插件怎么用或者想查看更多用法，可以访问上面的链接。下面开始在本地搭建项目跑代码了。

1.2、项目环境搭建

在d盘demo-node目录下创建一个名为demo-gulp-connect-php的空文件夹作为我们本节课程的项目目录。然后在windows下打开cmd命令窗口，然后依次输入以下代码：
cd D:\demo-node\demo-gulp-connect-php
d:进入文件夹
npm install gulp@3.9.1 --save-dev在项目目录下安装gulp的版本号是3.9.1。
npm init创建项目描述文件package.json，一路回车
npm install gulp-connect-php --save-dev安装gulp-connect-php插件。

一波操作过后，我们的项目环境及需要使用的插件就都有了。如图：在cmd中安装gulp@3.9.1及gulp-connect-php插件

1.3、创建简单的html及js文件

要创建的文件如下：index.html、app/css/reset.css、app/css/main.css、app/js/config.js、app/js/main.js
下面开始配置gulpfile.js。

1.4、手动配置gulpfile.js

在项目根目录下新建一个gulpfile.js文件，内容如下：

glupfile.js

/*gulp@3.9.1 + gulp-connect-php 启动php服务器以支持php文件*/
var gulp=require('gulp');
var connectPhp=require('gulp-connect-php');
/*php服务器任务*/
gulp.task('server',function(){
var options={
base:'./dist', /*从打包目录访问*/
open:true, /*自动打开浏览器*/
bin:'D:/wamp/bin/php/php5.6.25/php.exe',/*自本地php.exe路径地址*/
ini:'D:/wamp/bin/php/php5.6.25/php.ini',/*自本地php.ini路径地址*/
port:6666, /*自端口*/
};
connectPhp.server(options);/*启动服务*/
});
/*html任务*/
gulp.task('html',function(){
return gulp.src('./app/*.html')
.pipe(gulp.dest('./dist'))/*输出目录*/
});
/*php任务*/
gulp.task('php',function(){
return gulp.src('./app/*.php')
.pipe(gulp.dest('./dist'))/*输出目录*/
});
/*css任务*/
gulp.task('css',function(){
return gulp.src('./app/css/*.css')
.pipe(gulp.dest('./dist/css'))/*输出目录*/
});
/*js任务*/
gulp.task('js',function(){
return gulp.src('./app/js/*.js')
.pipe(gulp.dest('./dist/js'))/*输出目录*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch',function(){
gulp.watch('./app/*.html',['html']);/*html有修改时监听*/
gulp.watch('./app/css/*.css',['css']);/*css有修改时监听*/
gulp.watch('./app/js/*.js',['js']);/*js有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default',['html','css','js','server','watch']);/*黄色高亮的会先输出目录一次，以防首次运行gulp时要打包的dist目录无内容*/

特别强调：一定要注意上面代码中黄色高亮部分！

1.5、cmd中运行看效果

下面我们打开cmd，然后在里面输入：gulp并回车。此时会自动生成dist目录，并且dist目录中已经包含了css、js、html、php文件。如图：gulp@3.9.1+gulp-connect-php启动php服务的演示 （点击图片可以看视频哦~）
视频地址：戳我在新窗口播放

补充一下：视频中出现的“现在是gulp@4.0.0版本的”这句话忘记删除了，当前环境是3.9.1的，在一开始我已经输入gulp -v来查看gulp的版本号了。

1.6、新问题：浏览器不会时时刷新了

通过播放上面的视频可以知道：现在自动启动浏览器和支持php文件都已解决，但唯独修改后浏览器不会自动刷新！唉！你们你们这些插件，就不能搞个完美版的么，你说气人不！？

二、browser-sync 来解决浏览器刷新问题

所以接下来我们要再安装一个插件来配合gulp-connect-php解决浏览器实时自动刷新的问题。而这个插件就是browser-sync

不知道此时看官心里有没有疑问？反正艺灵心里是有的。

2.1、疑问

既然前面两篇文章中的gulp-webserver和gulp-connect都能实现自动刷新浏览器，为什么这里不跟这两个插件配合使用呢？或者是网上说的gulp-livereload这款插件呢？

好吧，自己挖坑自己跳。昨天专门测试了下，结果以失败而告终。

特别强调一下：单纯使用gulp-livereload是无法做到实时刷新浏览器的！！！

所以呢，今天就直接分享自己之前使用的方法，也就是：gulp-connect-php + browser-sync。

2.2、选择 browser-sync 的理由

其实现在说的这些坑，都是自己之前遇到的。这个browser-sync除了可以实时刷新浏览器外，还可以多端同步！什么意思呢？就是同一局域网，手机和电脑可同时访问网页，当我们修改过后，手机端和电脑端的界面会同时更新成最新的！听起来是不是很兴奋？！那让我们继续开始吧！

2.3、安装 browser-sync

插件官网地址： browsersync.io/docs/gulp

打开上面的链接后，我们就能看到官方提供的几个关于gulp + browser-sync 的例子，下面开始装插件。

切换到cmd窗口，然后输入：npm install browser-sync --save-dev并回车，等待插件安装。安装成功后还要继续修改gulpfile.js这个文件。

2.4、修改glupfile.js

glupfile.js

/*gulp@3.9.1 + gulp-connect-php + browser-sync 实现浏览器自动刷新(支持多设备同步)和支持php文件*/
var gulp=require('gulp');
var connectPhp=require('gulp-connect-php');
var browserSync=require('browser-sync').create();
/*php服务器任务*/
gulp.task('server',function(){
var options={
base:'./dist', /*从打包目录访问*/
debug:true, /*调试信息*/
bin:'D:/wamp/bin/php/php5.6.25/php.exe',/*自本地php.exe路径地址*/
ini:'D:/wamp/bin/php/php5.6.25/php.ini',/*自本地php.ini路径地址*/
port:6666, /*自定义端口*/
};
return connectPhp.server(options);/*启动服务*/
});
/*browser-sync任务*/
gulp.task('browser-sync',function(){
var options={
proxy:'127.0.0.1:6666',/*代理到上面php的地址，这个非常重要，否则不能同时支持php和页面时时刷新！*/
port:3000,
watch:true,
startPath: "index.html", /*自动打开的页面*/
open: 'external',/*自动跳转到一个外部地址，例如：192.168.0.102*/
};
return browserSync.init(options);
});
/*html任务*/
gulp.task('html',function(){
return gulp.src('./app/*.html')
.pipe(gulp.dest('./dist'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*php任务*/
gulp.task('php',function(){
return gulp.src('./app/*.php')
.pipe(gulp.dest('./dist'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*css任务*/
gulp.task('css',function(){
return gulp.src('./app/css/*.css')
.pipe(gulp.dest('./dist/css'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*js任务*/
gulp.task('js',function(){
return gulp.src('./app/js/*.js')
.pipe(gulp.dest('./dist/js'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch',function(){
gulp.watch('./app/*.html',['html']);/*html有修改时监听*/
gulp.watch('./app/css/*.css',['css']);/*css有修改时监听*/
gulp.watch('./app/js/*.js',['js']);/*js有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default',['html','css','js','server','browser-sync','watch']);/*黄色高亮的会先输出目录一次，以防首次运行gulp时要打包的dist目录无内容*/

2.5、cmd中运行gulp

切换cmd窗口，然后在里面输入：gulp并回车。然后就可以愉快的飙车了。如图：gulp@3.9.1+gulp-connect-php+browser-sync完美搭配的演示 (点击图片可播放哦)
视频地址：戳我在新窗口播放

而且现在我们用手机访问这个地址的话，也可以看到效果。手机上下滑屏时，浏览器上也会跟着动哦！前提是：手机跟电脑是同一个网络！可以用电脑创建一个wifi，然后手机连接就可以了，这样做兼容网站调试真是太爽了！

2.6、注意事项

在上面的gulpfile.js中，需要注意一点：browser-sync的代理地址要填写成gulp-connect-php的，如果直接用自己的server是无法解决我们目前问题的！

三、gulp4x版本怎么办？

3.1、在cmd中重新安装gulp@4.0.0

切换到cmd窗口，然后连按快捷键：Ctrl+C即可中断当前的监听任务，然后输入：
npm install gulp@4.0.0 --save-dev安装gulp4.0.0版本。安装完后打开package.json文件可以看到gulp的版本已经是4.0.0了。如图：在cmd中安装gulp@4.0.0版本

由于在昨天的文章《 gulp-connect实现自动刷新浏览器 》中，艺灵提供了两个完整的示例，所以这里直接放gulpfile.js源码，担心源码不对的可以下载源码包放本地跑跑。

3.2、方法一：改动小，仅增加gulp.series + gulp.parallel

glupfile.js

/*gulp@4.0.0 + gulp-connect-php + browser-sync */
var gulp=require('gulp');
var connectPhp=require('gulp-connect-php');
var browserSync=require('browser-sync').create();
/*php服务器任务*/
gulp.task('server',function(){
var options={
base:'./dist', /*从打包目录访问*/
debug:true, /*调试信息*/
bin:'D:/wamp/bin/php/php5.6.25/php.exe',/*自本地php.exe路径地址*/
ini:'D:/wamp/bin/php/php5.6.25/php.ini',/*自本地php.ini路径地址*/
port:6666, /*自定义端口*/
};
return connectPhp.server(options);/*启动服务*/
});
/*browser-sync任务*/
gulp.task('browser-sync',function(){
var options={
proxy:'127.0.0.1:6666',/*代理到上面php的地址，这个非常重要，否则不能同时支持php和页面时时刷新！*/
port:3000,
watch:true,
startPath: "index.html", /*自动打开的页面*/
open: 'external',/*自动跳转到一个外部地址，例如：192.168.0.102*/
};
return browserSync.init(options);
});
/*html任务*/
gulp.task('html',function(){
return gulp.src('./app/*.html')
.pipe(gulp.dest('./dist'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*php任务*/
gulp.task('php',function(){
return gulp.src('./app/*.php')
.pipe(gulp.dest('./dist'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*css任务*/
gulp.task('css',function(){
return gulp.src('./app/css/*.css')
.pipe(gulp.dest('./dist/css'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*js任务*/
gulp.task('js',function(){
return gulp.src('./app/js/*.js')
.pipe(gulp.dest('./dist/js'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch',function(){
gulp.watch('./app/*.html',gulp.series('html'));/*html有修改时监听*/
gulp.watch('./app/css/*.css',gulp.series('css'));/*css有修改时监听*/
gulp.watch('./app/js/*.js',gulp.series('js'));/*js有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default',gulp.series('html','css','js',gulp.parallel('server','browser-sync','watch')));

3.3、方法二：改动幅度大，function代替gulp.task，exports输出

glupfile.js

/*gulp@4.0.0 + gulp-connect-php + browser-sync */
var gulp=require('gulp');
var connectPhp=require('gulp-connect-php');
var browserSync=require('browser-sync').create();
/*php服务器任务*/
function server(){
var options={
base:'./dist', /*从打包目录访问*/
debug:true, /*调试信息*/
bin:'D:/wamp/bin/php/php5.6.25/php.exe',/*自本地php.exe路径地址*/
ini:'D:/wamp/bin/php/php5.6.25/php.ini',/*自本地php.ini路径地址*/
port:6666, /*自定义端口*/
};
return connectPhp.server(options);/*启动服务*/
}
/*browser-sync任务*/
function browser_sync(){
var options={
proxy:'127.0.0.1:6666',/*代理到上面php的地址，这个非常重要，否则不能同时支持php和页面时时刷新！*/
port:3000,
watch:true,
startPath: "index.html", /*自动打开的页面*/
open: 'external',/*自动跳转到一个外部地址，例如：192.168.0.102*/
};
return browserSync.init(options);
}
/*html任务*/
function html(){
return gulp.src('./app/*.html')
.pipe(gulp.dest('./dist'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
}
/*php任务*/
function php(){
return gulp.src('./app/*.php')
.pipe(gulp.dest('./dist'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
}
/*css任务*/
function css(){
return gulp.src('./app/css/*.css')
.pipe(gulp.dest('./dist/css'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
}
/*js任务*/
function js(){
return gulp.src('./app/js/*.js')
.pipe(gulp.dest('./dist/js'))/*输出目录*/
.pipe(browserSync.reload({stream:true}));/*刷新*/
}
/*watch监听，不需要在cmd中重复执行gulp xxx*/
function watch(){
gulp.watch('./app/*.html',html);/*html有修改时监听*/
gulp.watch('./app/css/*.css',css);/*css有修改时监听*/
gulp.watch('./app/js/*.js',js);/*js有修改时监听*/
}
/*导出任务*/
exports.default=gulp.series(html,css,js,gulp.parallel(server,browser_sync,watch));

参考文档： github.com/gulpjs/gulp/

上面两份源码是gulp@4.0.0版本的，都能成功跑项目。在gulp升级时，对照着格式修改就行了。

四、本文总结

五、源码下载

为了方便看官将本文中出现的场景复现，艺灵会提供文章中各实例的源码。完整源码已打包好并上传至百度云，下载链接:
pan.baidu.com/s/1RoSIdUIXK_WC1m9ZwJ5tfQ 提取码: nxn7

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2019-04-29/gulp-connect-php-browser-sync.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。