详解如何使用gulp实现项目在浏览器中的自动刷新

情况描述：

我们很容易遇到这样一种情况:
　　我们并不是一开始就规划好了整个项目，比如可能接手别人的项目或者工程已经手动创建好了，现在要想利用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来少输了几个单词。