好文原文地址：http://segmentfault.com/a/1190000000354555

本文将首先介绍grunt-markdown插件如何配合HTML模板使用，接着我将介绍如何使用grunt-watch插件将工作效率提升至新层次。如果你不熟悉GruntJS，请先阅读。

Github仓库

今天的示例代码可以从中获取。

配合模板使用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: '', after: '' } } } } },

template/index.html看起来大致是这样的：

  
     
        
    
 
     
 
      
 
            
       30 Technologies in 30 Days 
      
 
     
 
    
 
    
      <%=content%> 
    
  

<%=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 watchRunning "watch" taskWaiting...

现在我们修改下js文件夹下的app.js文件。将如下函数添加到app.js。

function goodNight(name){ return "Good Night, " + name; }

一旦我们增加了这个函数，Grunt的watch任务会同时运行uglify和markdown任务。

$ grunt watchRunning "watch" taskWaiting...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 } } }

这会在  启动服务。我们也可以修改端口号：

watch :{    scripts :{      files : ['js/app.js','*.md','css/*.css'], tasks : ['uglify','markdown'], options : { livereload : 9090, } } }

重启服务器，现在可以访问 

为了启用在线重载，我们需要将以下内容加入到 templates/index.html 文件中。

重启服务器，修改下bootstrap.css，将

.navbar-inverse {  background-color: #222222; border-color: #080808; }

改成

.navbar-inverse {  background-color: red; border-color: #080808; }

我们马上就能在docs/html/day1.html中看到变化。

今天就到这里了。欢迎继续反馈。