英文原文：http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/
不久前, 我写了一篇 explaining how to use grunt and livereload的文章，讲述当HTML, CSS or javascipt发生变化或者改动时，如何自动刷新页面.grunt-livereload插件已经被弃用了,但是我们同样能得到其带来的魔力.看看是如何做的吧！
相同点
如之前那篇文章, 我们将配置grunt为:
- 载入一个服务来支持你的项目文件 (helps inject the Javascript needed for livereload to work);
- 打开浏览器访问你的项目 (optional, but saves a little time);
- 最重要的是当index.html发生改变时自动重新加载页面.
如之前的文章那样，我们会让事情简单一点. 项目中只有index.html文件 (内容任意, 但是确保有一个 <body> 标签).同样的, 你需要在你的机器上安装 Grunt JS . 这也就是说你也需要安装 NodeJS and NPM .
不同点
和之前文章中不同的是，我们需要使用到不同的nodejs 包. 去掉grunt-livereload, 增加grunt-watch (它将替换同样了grunt-regarde).没有grunt-livereload, 我们同样需要注入用于重新加载页面的Javascript. 这就是为什么我们会将grunt-contrib-connect 换成 grunt-express （他有一个可选项可以实现此功能）. 换完之后的清单如下：
-
grunt-express, 提供文件服务并注入livereload javascript; -
grunt-open, 打开浏览器; -
grunt-contrib-watch, 模拟文件的改变并通知livereload服务.
package.json文件就变成：
| 1234567891011 |
{
"name":
"grunt-livereload-renewed",
"version":
"1.0.0",
"devDependencies": {
"grunt":
"~0.4.1",
"matchdep":
"~0.1.2",
"grunt-express":
"~1.0.0-beta2",
"grunt-contrib-watch":
"~0.5.1",
"grunt-open":
"~0.2.1"
}
}
|
我们现在可以在命令行进入项目根目录中执行 npm install安装这些包 .完成后我们就可以配置Grunt了
SERVING AND RECEIVING服务并接受
在深入研究livereload之前, 让我们先看一下其中的一部分逻辑：加载一个服务并自动打开浏览器. Grunt 的配置和之前文章很相似,因为grunt-express和grunt-contrib-connect具有相似的选项 (自少满足了我们的需求). 下面是followingGruntfile.js文件的内容 (to place at the root of your project):
| 12345678910111213141516171819202122232425262728293031323334353637383940 |
// Gruntfile with the configuration of grunt-express and grunt-open. No livereload yet!
module.
exports
=
function(
grunt) {
// Load Grunt tasks declared in the package.json file
require(
'matchdep').filterDev(
'grunt-*').forEach(grunt.loadNpmTasks);
// Configure Grunt
grunt.initConfig({
// grunt-express will serve the files from the folders listed in `bases`
// on specified `port` and `hostname`
express
: {
all
: {
options
: {
port
:
9000,
hostname
:
"0.0.0.0",
bases
: [
__dirname]
// Replace with the directory you want the files served from
// Make sure you don't use `.` or `..` in the path as Express
// is likely to return 403 Forbidden responses if you do
// http://stackoverflow.com/questions/14594121/express-res-sendfile-throwing-forbidden-error
}
}
},
// grunt-open will open your browser at the project's URL
open
: {
all
: {
// Gets the port from the connect configuration
path
:
'http://localhost:<%= express.all.options.port%>'
}
}
});
// Creates the `server` task
grunt.registerTask(
'server', [
'express',
'open',
'express-keepalive'
]);
};
|
完成了配置后,在你的命令行中输入grunt server(from the folder of the project, of course)将会在9000端口启动服务并打开http://localhost:9000，这样你就可以访问你的项目了（浏览器中）.
自动重新加载
Livereload 通过基于文件的改动通知自动刷新页面，这就说：
- 当文件被改动时某人需要通知livereload: 这就是
grunt-contrib-watch插件所扮演的角色 (它同样会由livereload启动) - 你将需要在你的页面中获取变化后的新内容. 这正是
grunt-express提供了这样的服务.
这两个任务通过使用livereload都很容易实现, 它提供了一个livereload 选项. 将其设置为true 或者你想要livereload服务运行的端口号（这种情况下要主要要和express设置的端口一致)).
下面就是Gruntfile最后的被容:
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
// Gruntfile with the configuration of grunt-express and grunt-open. No livereload yet!
module.
exports
=
function(
grunt) {
// Load Grunt tasks declared in the package.json file
require(
'matchdep').filterDev(
'grunt-*').forEach(grunt.loadNpmTasks);
// Configure Grunt
grunt.initConfig({
// grunt-express will serve the files from the folders listed in `bases`
// on specified `port` and `hostname`
express
: {
all
: {
options
: {
port
:
9000,
hostname
:
"0.0.0.0",
bases
: [
__dirname],
// Replace with the directory you want the files served from
// Make sure you don't use `.` or `..` in the path as Express
// is likely to return 403 Forbidden responses if you do
// http://stackoverflow.com/questions/14594121/express-res-sendfile-throwing-forbidden-error
livereload
:
true
}
}
},
// grunt-watch will monitor the projects files
watch
: {
all
: {
// Replace with whatever file you want to trigger the update from
// Either as a String for a single entry
// or an Array of String for multiple entries
// You can use globing patterns like `css/**/*.css`
// See https://github.com/gruntjs/grunt-contrib-watch#files
files
:
'index.html',
options
: {
livereload
:
true
}
}
},
// grunt-open will open your browser at the project's URL
open
: {
all
: {
// Gets the port from the connect configuration
path
:
'http://localhost:<%= express.all.options.port%>'
}
}
});
// Creates the `server` task
grunt.registerTask(
'server', [
'express',
'open',
'watch'
]);
};
|
当grunt服务启动后, 如果你改动了index.html文件, 浏览器将自动重新加载页面. 模拟器可以监听多个文件,但是需要在任务中配置。文档 中有解释.
注意: 如果你在Ubuntu中执行此任务时(或者是其他的linux的发行版本) 并遇到一个监听 ENOSPC 错误, 你也许需要查看它的 Github 说明.
注意: 似乎grunt-express提供了一个监听 选项 来模拟文件的变化并触发livereload. 这样会让Gruntfile更简洁一些. 但是，我更愿意配置一个单独的grunt-contrib-watch任务. 因为我经常需要它去模拟其他文件达到其他目的(YUIDoc, LESS…). 并将概念也进行了区分: grunt-express 提供文件服务, grunt-contrib-watch 模拟他们. 这样很容易找到改动之前的位置, 最后 ：这只是个人的偏好)
总结
grunt-contrib-livereload被弃用, 但是livereload通过grunt仍然移植的很好. 更欣慰的是, 其他插件配合他同样做的很好,这样就会让配置更简洁.最后我要感谢 Chandler Van De Water 通知我旧的插件被弃用了,并且让我们享受livereload的魔力吧！
