javascript
Day 7： GruntJS 在线重载 提升生产率至新境界
在我的“30天學習30種技術”挑戰(zhàn)的第5天，我提到了如何使用GruntJS來執(zhí)行重復性任務。今天，我們將把上次提到的例子擴展一下，加入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最重要的插件之一。這個插件可以在后臺運行，監(jiān)視配置好了的文件改動。使用如下的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文檔也會被創(chuàng)建。
使用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
今天就到這里了。歡迎繼續(xù)反饋。
原文 Day 7: GruntJS LiveReload--Take Productivity to the Next Level
翻譯 SegmentFault
總結
以上是生活随笔為你收集整理的Day 7： GruntJS 在线重载 提升生产率至新境界的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Day 6：在 Java 虚拟机上使用
- 下一篇： Day 8： Harp.JS——现代静态