今天，我们将把上次提到的例子扩展一下，加入HTML模板和在线重载服务。本文将首先介绍grunt-markdown插件如何配合HTML模板使用，接着我将介绍如何使用grunt-watch插件将工作效率提升至新层次。如果你不熟悉GruntJS，请先阅读我关于GruntJS的文章。
Github仓库
今天的示例代码可以从github: day7-gruntjs-livereload-example中获取。
配合模板使用GruntJS的Markdown插件
在我上一篇GruntJS文章中，我提到了我们可以通过grunt-markdown插件将Markdown文档转换成HTML文档。为了让blog的页面好看一点，我决定使用Twitter Bootstrap风格。这就要求我们指定grunt-markdown插件将使用的HTML模板，这很容易，我们只需指定模板配置选项。
markdown: {
all: {
files: [
{
expand: true,
src: '*.md',
dest: 'docs/html/',
ext: '.html'
}
],
options: {
template: 'templates/index.html',
markdownOptions: {
gfm: true,
codeLines: {
before: '<span>',
after: '</span>'
}
}
}
}
},
template/index.html看起来大致是这样的：
<!DOCTYPE html>
<html>
<head>
<title>Learn 30 Technologies in 30 Days</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" media="screen">
<style type="text/css">
body {
padding-top:60px;
padding-bottom: 60px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">30 Technologies in 30 Days</a>
</div>
</div>
</div>
<div id="main" class="container">
<%=content%>
</div>
</body>
</html>
<%=content%>会被Markdown转成的HTML文档替换。
再次运行grunt命令后，我们就能看到生成的HTML 5文档了。
grunt
生成的HTML 5文档位于 docs/html 文件夹下。
盯紧
grunt-contrib-watch是GruntJS最重要的插件之一。这个插件可以在后台运行，监视配置好了的文件改动。使用如下的npm命令安装grunt-contrib-watch插件。
npm install grunt-contrib-watch --save-dev
上面的命令将更新package.json中的依赖。
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.5",
"grunt-markdown": "~0.4.0",
"grunt-contrib-watch": "~0.5.3"
}
}
和其他插件一样，接下来的任务是在Gruntfile.js中配置插件，我们需要将如下的代码加入到grunt的initConfig方法。这些代码确保一旦文件变动，grunt将运行uglify和markdown任务
watch :{
scripts :{
files : ['js/app.js','*.md','css/*.css'],
tasks : ['uglify','markdown']
}
}
将下面这行加入Gruntfile，添加watch任务。
grunt.loadNpmTasks('grunt-contrib-watch');
运行grunt watch命令便可调用Grunt的watch任务。
$ grunt watch
Running "watch" task
Waiting...
现在我们修改下js文件夹下的app.js文件。将如下函数添加到app.js。
function goodNight(name){
return "Good Night, " + name;
}
一旦我们增加了这个函数，Grunt的watch任务会同时运行uglify和markdown任务。
$ grunt watch
Running "watch" task
Waiting...OK
>> File "js/app.js" changed.
Running "uglify:build" (uglify) task
File "js/app.min.js" created.
Running "markdown:all" (markdown) task
File "docs/html/day1.html" created.
Done, without errors.
Completed in 0.580s at Sun Nov 03 2013 00:15:54 GMT+0530 (IST) - Waiting...
为了确保变动已经加入，我们查看下更新过的app.min.js文件。
function hello(a){return"Hello, "+a+"! How are you?"}function bye(a){return"Bye, "+a}function goodNight(a){return"Good Night, "+a}
类似地，如果我们修改了Markdown文件，新HTML文档也会被创建。
使用livereload
GruntJS的特性之一就是它可以自动重载改动。这非常有用，比如我们修改了样式之后不用点击浏览器的刷新按钮就能看到改动。将watch插件的配置修改下就能使用在线重载啦。
watch :{
scripts :{
files : ['js/app.js','*.md','css/*.css'],
tasks : ['uglify','markdown'],
options : {
livereload : true
}
}
}
这会在 http://localhost:35729/ 启动服务。我们也可以修改端口号：
watch :{
scripts :{
files : ['js/app.js','*.md','css/*.css'],
tasks : ['uglify','markdown'],
options : {
livereload : 9090,
}
}
}
重启服务器，现在可以访问 http://localhost:9090/
为了启用在线重载，我们需要将以下内容加入到 templates/index.html 文件中。
<script src="http://localhost:9090/livereload.js"></script>
重启服务器，修改下bootstrap.css，将
.navbar-inverse {
background-color: #222222;
border-color: #080808;
}
改成
.navbar-inverse {
background-color: red;
border-color: #080808;
}
我们马上就能在docs/html/day1.html中看到变化。
https://www.openshift.com/sites/default/files/images/livereloading-in-action.png
今天就到这里了。欢迎继续反馈。
原文 Day 7: GruntJS LiveReload–Take Productivity to the Next Level
翻译 SegmentFault
