Gulp.js-livereload 不用F5了，实时自动刷新页面来开发

港控/mmm° 2022-08-08 06:12 91阅读 0赞

![gulp-livereload1.gif][]

## 前言 ##

正如上图所示，使用 `gulp-livereload`，可以实时保存刷新，那样就不用按F5和切换界面了，无形中省了好多时间，有没有！：D

*  Gulp.js：比 `Grunt` 更简单的`自动化项目构建工具`
 *  gulp-livereload：顾名思义，这是 Gulp.js 中的`其中一个插件`，本文的主题就是它了。

## 安装 ##

第一步：`全局安装`gulp 和 `当前目录部署` gulp 和 gulp-livereload

npm install gulp -g npm install gulp gulp-livereload --save-dev

第二步：安装 `chrome` 插件，[点我就去安装][Link 1]

## 使用 ##

第一步： 当前目录新建 `gulpfile.js` 文件，写入以下代码。

var gulp = require('gulp'), livereload = require('gulp-livereload'); gulp.task('watch', function () { // 这里的watch，是自定义的，写成live或者别的也行 var server = livereload(); // app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件 gulp.watch('app/**/*.*', function (file) { server.changed(file.path); }); });

第二步： 命令行下运行

gulp watch

此时，你会发现当你修改 `app` 文件夹下的任何文件，命令行都会有内容输出，说明能够监控到文件的变化，运作正常了。

第三步： 以服务器的方式打开页面，例如 `localhost:3000`，而不是 `file:///F:/web/app/index.html`接着点击刚刚安装的 `chrome插件` ，中间变为实心黑色圆点表示开始运作了。

![gulp-livereload2.gif][]

现在只要文件一保存，浏览器就会马上刷新了。

> ##### 技术： node.js+npm #####
> 
> ##### 扩展： [Gulp.js—比Grunt更易用的前端构建工具][Gulp.js_Grunt] #####
> 
> ##### 时间： 2014年4月 #####
> 
> ##### 我的博客： [think2011][] #####

## 后续 ##

目前楼主的用的方式更简单一些。

npm i livereload -g

之后在任何目录下执行 `livereload` ，并打开浏览器的插件即可。

[gulp-livereload1.gif]: http://think2011.qiniudn.com/gulp-livereload1.gif
[Link 1]: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
[gulp-livereload2.gif]: http://think2011.qiniudn.com/gulp-livereload2.gif
[Gulp.js_Grunt]: http://www.36ria.com/6373
[think2011]: http://think2011.github.io/