前言
在我的30天学习30种技术挑战的第五天，讨论了用GruntJS执行重复任务。今天我们用HTML模板和 LiveReload服务器来拓展那里面的示例。这篇博客，我们先来讨论怎样用Grunt-markdown插件使用HTML模板，然后讨论用grunt-watch插件提升生产力。如果你对GruntJS不了解，可以参考我的前一篇介绍。
Github 仓库
今天的demo已经上传到github:day7-gruntjs-livereload-example.
用GruntJS Markdown 插件调用模板
在我之前的博客(参考上面链接)里，讨论了怎样用Grunt-Markdown插件把Mardown文件转换成HTML文档。大多数情况下，我们的HTML文档会用CSS格式。为了使我的博客格式好看些，我决定用Twitter Bootstrap来格式化HTML. 这要求我们指定HTML模板给grunt-markdown插件调用，使用模板配置选项来指定非常简单。
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文件夹。
后台Watch
GruntJS的一个核心插件是Grunt-contrib-watch. 这个插件可以在后台运行，监测配置文件的更改。安装grunt-contrib-watch插件，使用以下npm命令。
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方法里。这确保了无论何时这些文件有更改时，它都会更新执行uglify 和*markdown任务。
watch :{ scripts :{ files : ['js/app.js','*.md','css/*.css'], tasks : ['uglify','markdown'] } }
接下来通过以下方式加载watch到Gruntfile.
grunt.loadNpmTasks('grunt-contrib-watch');
要调用watch任务，执行以下命令
$ grunt watch Running "watch" task Waiting...
现在更改js文件夹下的app.js文件，添加以下方法。
function goodNight(name){ return "Good Night, " + name; }
加完这个方法，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的一个功能是自动加载更新，这对我们改动格式后想立马看到效果同时又不按浏览器刷新键的时候很有用。要使用LiveReload,用以下代码替换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/blogs/day-7-gruntjs-livereload-take-productivity-to-the-next-level