Gulp.js-livereload 不用F5了,实时自动刷新页面来开发
发布于 3 年前 作者 think2011 49156 次浏览 最后一次编辑是 1 年前 来自 分享

前言

正如上图所示,使用 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 ,并打开浏览器的插件即可。

29 回复

问下楼主,这个GIF是咋整出来的呀?

doodle的插件是参照这个写的么

这个好适用

@CosWInd Doodle 那时候我还不会用 LiveReload 呢

直接用webstorm阿

补充一下关于第三步的

第三步:以服务器的方式打开页面,例如 localhost:3000,而不是 file:///F:/web/app/index.html

可以用http-server这个npm来实现

其实可以不装chrome插件就可以的

  1. 可以设置sublime离开编辑器自动保存
  2. 似乎这个更强悍些哈。 多设备自动同步操作的:http://www.browsersync.io/

感谢楼主的分享,之前其实早就用上了,但是没有注意插件上的那个按钮,看了楼主的gif小图才明白自己忘了点了!

另外新版本有新的用法了,livereload.listen()以后,可以直接pipe需要改动后刷新的那个管道到livereload()上去,不用watch了。当然以前的方法也可以使用,不过api变动了一些

服务端主动通知,WebSocket ?

怎么用服务器方式打开呢? 为什么我的localhost:3000无法访问?

截图用什么软件弄的?

我能发一个广告么? 我写的 f2e-server 里面也有相关的功能,有关插件安装部分的文档描述正好跟你这个互补。 http://f2e-server.com/other.html#crx

如果是搭配gulp使用的话,推荐使用browserSync,更方便。

如果是搭配gulp使用的话,推荐使用browserSync,更方便。 +1

livereload在我的电脑无法起作用,用browserSync就行

browserSync 是不支持 POST 的 ajax 么?(挖下坟)

现在这么调用:

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']);
});

这个好啊 不费事啊

来自炫酷的 CNodeMD

也就设计在编写静态HTML能用,开发全是动态的东西,然并卵

live-server 就能

用webpack-hot-reload甚至不用刷新

回到顶部