當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

好文推荐系列--------(3)GruntJS 在线重载提升生产率至新境界

發布時間：2023/12/10 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了好文推荐系列--------(3)GruntJS 在线重载提升生产率至新境界小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

本文將首先介紹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?文件中。

重啟服務器，修改下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

今天就到這里了。歡迎繼續反饋。

轉載于:https://www.cnblogs.com/alisayuan/p/5124146.html

總結

以上是生活随笔為你收集整理的好文推荐系列--------(3)GruntJS 在线重载提升生产率至新境界的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。