Nodejs Gulp.js-livereload 不用F5了，实时自动刷新页面来开发
Nodejs Gulp.js-livereload 不用F5了，实时自动刷新页面来开发
前言
正如上图所示，使用 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 插件，点我就去安装
使用
第一步： 当前目录新建 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插件 ，中间变为实心黑色圆点表示开始运作了。
现在只要文件一保存，浏览器就会马上刷新了。
技术： node.js+npm
扩展： Gulp.js—比Grunt更易用的前端构建工具
时间： 2014年4月
我的博客： think2011
后续
目前楼主的用的方式更简单一些。
npm i livereload -g
之后在任何目录下执行 livereload ，并打开浏览器的插件即可。
Nodejs Gulp.js-livereload 不用F5了，实时自动刷新页面来开发
前言
正如上图所示，使用 gulp-livereload，可以实现文件保存后自动刷新浏览器，这样就无需频繁地按F5键或切换窗口，从而节省大量时间。😊
- Gulp.js：一个比
Grunt更简洁的自动化项目构建工具。 - gulp-livereload：这是一个用于 Gulp.js 的插件，它可以实现文件变化时自动刷新浏览器。
安装
首先需要全局安装 gulp 并在当前项目中安装 gulp 和 gulp-livereload：
# 全局安装 gulp
npm install gulp -g
# 在当前项目中安装 gulp 和 gulp-livereload
npm install gulp gulp-livereload --save-dev
然后，你需要在 Chrome 浏览器中安装 LiveReload 插件。
使用
- 在项目的根目录下创建一个
gulpfile.js文件，并添加以下代码：
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function () {
var server = livereload();
// 监控 app 文件夹下的所有文件
gulp.watch('app/**/*.*', function (file) {
server.changed(file.path);
});
});
这段代码的作用是监听 app 文件夹下的所有文件，当文件发生变化时，会触发 server.changed(file.path) 方法，从而通知浏览器刷新页面。
- 在命令行中运行以下命令启动 Gulp 监听任务：
gulp watch
此时，你会发现每当修改 app 文件夹下的任何文件时，命令行会有输出信息，这表明文件变化已经被成功监控到了。
- 打开你的本地服务器（例如
http://localhost:3000），而不是直接通过文件路径（如file:///F:/web/app/index.html）打开页面。
接下来，点击刚刚安装的 LiveReload 插件，插件中间会显示一个实心的黑色圆点，表示 LiveReload 正在工作。
现在，每当你保存文件时，浏览器会自动刷新！
后续
如果你希望更简单地使用 LiveReload，可以尝试以下命令：
npm i livereload -g
之后，在任意目录下执行 livereload，并在浏览器中启用 LiveReload 插件即可。
以上就是使用 Gulp.js 和 gulp-livereload 实现自动刷新浏览器的方法，希望能帮助你提高开发效率。
补充一下关于第三步的
第三步：以服务器的方式打开页面，例如 localhost:3000，而不是 file:///F:/web/app/index.html
可以用http-server这个npm来实现
另外新版本有新的用法了，livereload.listen()以后，可以直接pipe需要改动后刷新的那个管道到livereload()上去，不用watch了。当然以前的方法也可以使用，不过api变动了一些
我能发一个广告么？ 我写的 f2e-server 里面也有相关的功能，有关插件安装部分的文档描述正好跟你这个互补。 http://f2e-server.com/other.html#crx
现在这么调用：
var gulp = require('gulp'),
less = require('gulp-less');
var livereload = require('gulp-livereload');
gulp.task(‘less’, function() {
gulp.src([‘frontend-tech/webIndexPage/*.less’])
.pipe(less())
.pipe(gulp.dest(‘frontend-tech/webIndexPage/src’))
.pipe(livereload());
});
gulp.task(‘watch’, function() {
livereload.listen();
gulp.watch(‘frontend-tech/webIndexPage/*.less’, [‘less’]);
});
https://github.com/gaearon/react-hot-loader https://github.com/gaearon/react-transform-boilerplate
这才是我想要的：
<竟然是两年前的老帖子。。。。。>
要在 Node.js 中使用 Gulp.js 和 gulp-livereload 实现自动刷新页面，可以按照以下步骤进行：
安装
首先，全局安装 gulp 并在项目中安装 gulp 和 gulp-livereload：
npm install gulp -g
npm install gulp gulp-livereload --save-dev
然后，在 Chrome 浏览器中安装 LiveReload 插件（可以从 这里 下载）。
使用
1. 创建 gulpfile.js
在项目根目录创建一个 gulpfile.js 文件，并添加以下代码：
var gulp = require('gulp');
var livereload = require('gulp-livereload');
gulp.task('watch', function () {
var server = livereload();
// 监听 app 文件夹下的所有文件变化
gulp.watch('app/**/*.*', function (file) {
server.changed(file.path);
});
});
2. 运行 Gulp 任务
在命令行中运行以下命令启动监听任务：
gulp watch
此时，每当你在 app 文件夹下修改任何一个文件时，命令行会显示文件变化的信息，说明监听功能正常工作。
3. 打开浏览器并启用 LiveReload
确保你的网页是以服务器方式访问，而不是直接通过文件系统访问（例如使用 localhost:3000 而不是 file:///path/to/file）。然后点击 LiveReload 插件上的小图标，使其处于激活状态。
4. 保存文件，自动刷新
现在，每当你保存 app 文件夹中的文件时，浏览器将自动刷新。
后续简化
如果你想要更简单的设置，可以使用 livereload 包来实现自动刷新：
npm i livereload -g
然后在任何目录下运行 livereload，并打开浏览器插件即可。
这样，你就无需再手动按 F5 刷新页面，从而提高开发效率。
