情况描述：
我们很容易遇到这样一种情况: 我们并不是一开始就规划好了整个项目，比如可能接手别人的项目或者工程已经手动创建好了，现在要想利用gulp来实现浏览器自动刷新，那么如何做呢？ 其实非常简单，本篇文章将详细介绍实现方法和其中可能遇到的一些坑。 假设你已经使用npm全局安装了gulp，那么具体方法如下：一、创建gulpfile.js文件
首先在项目根目录创建gulpfile.js文件，其作用在于，一旦我们在命令行输入gulp命令就可以读取gulpfile.js文件,运行其中的代码。现在gulpfile.js是一个空文件，在其中输入以下代码：
var gulp = require(‘gulp’);
gulp.task(‘default’, function() {
// 将你的默认的任务代码放在这
});
现在，我们在命令行中用cd指令打开项目根目录，输入gulp指令或者gulp default指令，便会执行gulpfile.js中名为default的任务。当然，在default任务中你可以什么都不写，便什么也不会执行。
不过，这时会报错：local gulp not found in，这是因为我们虽然全局安装了gulp，却没有在项目中本地安装gulp模块。
那么全局安装和本地安装有何区别呢，请看第二节。
二、在项目中安装gulp模块
既然已经全局安装了gulp，为什么还要在项目中再次安装呢？这里先讲讲全局安装gulp的作用。当我们全局安装gulp后，在命令行中输入：
gulp 任务名
指令便会读取gulpfile.js，执行对应任务。如果直接输入gulp指令，不加任务名，即：
gulp
便会执行default的默认任务。
下面看看本地安装gulp的作用。local gulp not found in这个错误表明，我们虽然能够在命令行中执行gulp指令读取gulpfile.js文件，然而在gulpfile.js文件中却无法使用gulp模块的API，那么就需要本地安装gulp。
操作方法：
1、在命令行中用cd指令打开项目根目录；
2、输入如下指令：
npm install --save-dev gulp
这样就在项目根目录下创建了node_modules目录，它保存的是用npm安装的模块。这里会看到一大堆文件夹和文件，其中就包括刚刚安装的gulp模块的文件夹。
这里–save是两个中划线，表明将把安装的gulp模块信息写入package.json文件dependencies 键下，如果项目没有package.json文件，就没有什么用。实测没有package.json文件也没有什么影响。实际项目中往往会有这个文件，便需要加上–save。加上-dev即–save-dev则不是写入dependencies 键下，而是会写入devDependencies 键下。
在项目根目录下还会多一个package-lock.json文件，不用管它。
三、在项目中安装gulp-connect和gulp-open模块
gulp-connect模块用于启动一个服务器，gulp-open模块用于打开浏览器查看指定url的页面。 操作方法： 1、在命令行中用cd指令打开项目根目录； 2、输入如下指令：npm install --save gulp-connect
npm install --save gulp-open
可以发现，在node_modules目录下多了gulp-connect和gulp-open、open文件夹，这正是我们刚刚安装好的。
四、在gulpfile.js中编写自动打开浏览器和自动刷新浏览器的指令
首先我们需要引入模块：var gulp=require(‘gulp’);//引入gulp模块
var connect=require(‘gulp-connect’);//引入gulp-connect模块
var open=require(‘open’);//引入open模块，注意不是gulp-open
我们可以定义一个根目录：
var rootPath=’./’; //根据实际情况定义
下面就可以使用gulp-connect模块启动服务器了：
gulp.task(‘serve’,function () {
connect.server({
root:rootPath, //使用前面定义的rootPath作为服务器运行的根目录
livereload:true, //是否自动监听，true表明自动监听
port:3056 //服务器的端口号，可以随便取一个
});
open(‘http://localhost:3056’); //自动使用浏览器打开http://localhost:3056的页面
});
这时，只需在命令行输入gulp serve指令便会自动启动服务器，并且在浏览器中打开http://localhost:3056，默认打开的是根目录下index.html文件。
但是还不能做到我们改变文件时，自动刷新浏览器查看效果，如果要监听根目录下html文件夹的.html文件和css文件夹中的.css文件，则可以编写如下任务添加到open语句后面：
gulp.watch(rootPath+‘html/.html’,[‘html’]); //一旦html目录下的.html文件改变便执行html任务
gulp.watch(rootPath+'css/.css’,[‘css’]); //一旦css目录下的.css文件改变便执行html任务
这里html和css任务应该怎么实现呢？我们需要使用connect.reload()。
如果我们在html任务和css任务中都这样写：
gulp.task(‘html’,function () {
connect.reload();
});
gulp.task(‘css’,function () {
connect.reload();
});
是不行的，因为只是自动刷新浏览器，却没有读取到目标文件的改变，结果便是没有变化。因此做如下改动：
gulp.task(‘html’,function () {
gulp.src(rootPath+‘html/.html’) //读取html文件的变化
.pipe(connect.reload());
});
gulp.task(‘css’,function () {
gulp.src(rootPath+'css/.css’) //读取css文件的变化
.pipe(connect.reload());
});
现在大功告成。只需在命令行中输入gulp serve便可以自动打开浏览器，查看页面效果。如果改变了html目录和css目录下的文件还会自动刷新页面效果。当然如果还要监听其他文件如js文件，只需要编写对应的语句即可。
现在还有一个小技巧可以稍微偷点懒：
在gulefile.js文件中增加一条语句：
gulp.task(‘default’,[‘serve’]);
这样我们在命令行中输入gulp便会自动执行default任务，而default任务执行之前先执行serve任务，假使default任务中什么也没有的话，便和执行gulp serve是一样的效果了。以后我们就可以在命令行中输入gulp，比起gulp serve来少输了几个单词。