效率

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

前言

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

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

安装

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

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

第二步：安装 chrome 插件，点我就去安装

使用

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

1
2
3
4
5
6
7
8
9
10
11
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);
    });
});

第二步： 命令行下运行

1
gulp watch

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

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

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

后续的问题：2014年8月28日18:04:59

  • 有不少朋友问到这篇文章的问题。
  • 首先很抱歉，这篇文章已经过时了，现在有更简单方便的代替方案了。
  • 更方便的是 gulp-webserver 或者 livereload
技术： node.js+npm
扩展： Gulp.js—比Grunt更易用的前端构建工具
时间： 2014年4月