好文推荐系列--------(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
文件中。
<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
今天就到这里了。欢迎继续反馈。
转载于:https://www.cnblogs.com/alisayuan/p/5124146.html
好文推荐系列--------(3)GruntJS 在线重载 提升生产率至新境界相关推荐
- Day 7: GruntJS 在线重载 提升生产率至新境界
在我的"30天学习30种技术"挑战的第5天,我提到了如何使用GruntJS来执行重复性任务.今天,我们将把上次提到的例子扩展一下,加入HTML模板和在线重载服务.本文将首先介绍gr ...
- ChromeFK插件推荐系列二十三:在线文字转语音/语音朗读插件推荐
本次分享几个在线文字转语音/语音朗读插件,内容来自: chromefk.希望对你有所帮助. 1.[CHROMEFK]文字到语音 听到您的文字,只需复制贴与20多个口音 https://www.chro ...
- 计算机网络校园局域网课题,毕业论文基于VLAN技术的校园局域网建设word文档_全文免费在线阅读(推荐阅读)...
<[毕业论文]基于VLAN技术的校园局域网建设.doc>由会员分享,可免费在线阅读全文,更多与<[毕业论文]基于VLAN技术的校园局域网建设(word文档)_全文免费在线阅读> ...
- 【软件推荐系列第 1 篇】Quicker 一个相见恨晚的Windows效率神器
这是[软件推荐系列第 1 篇],如果觉得有用的话,欢迎关注专栏. 俗话说,工欲善其事,必先利其器,工作中有哪些提高工作效率的"神器"软件呢? 能作为[效率软件]系列的第一篇,自然有 ...
- Elasticsearch-好文推荐
Elasticsearch-好文推荐 1 概念 1.1 基本概念 Elasticsearch学习-关于倒排索引.DocValues.FieldData和全局序号 Elasticsearch学习-Doc ...
- 满分答卷 2022年“研究生科研素养提升”系列公益讲座在线测评
2022年"研究生科研素养提升"系列公益讲座在线测评 一.单选题 1.( )在正文之后,必须有一个致谢,表达对老师.同学及其他对论文有贡献的人. 会议论文 学位论文 学术论文 科学 ...
- Spark推荐系列之Word2vec算法介绍、实现和应用说明
Spark推荐实战系列目前已经更新: Spark推荐实战系列之Swing算法介绍.实现与在阿里飞猪的实战应用 Spark推荐实战系列之ALS算法实现分析 Spark中如何使用矩阵运算间接实现i2i F ...
- 一文彻底解决C++中的重载、重写和隐藏操作
一文彻底解决C++中的重载.重写和隐藏操作 往期C++系列相关内容: C++ 类中静态成员和静态成员函数的继承覆盖 C++中的.和-> 网络相关内容: select.poll.epoll.多线程 ...
- 【好文推荐】空中计算在指挥控制数据链中的应用
往期回顾 [好文推荐]陆海空天一体化海事监管指挥系统发展设想 [好文推荐]基于XGBoost的船舶仿冒行为监测方法 本文发表于<指挥信息系统与技术>2022年第6期 作者:张子龙,田少鹏, ...
最新文章
- 现代版的大案牍术:数字孪生在城市的应用
- DFT的准备(一)(对离散序列的傅里叶分析大总结)
- Mio C220破解问题
- 怎么html中加样式,简明教程 在HTML中添加样式表的方法
- 三星第二财季净利69亿美元 同比增50%
- HttpRunner自动化框架学习笔记
- 信息检索IR评价中常见的评价指标-MAP\NDCG\ERR\P@10等
- cygwin开发环境搭建与apt-cyg的应用
- tms320c2000 c语言伪指令,TMS320F240XDSP汇编及C语言多功能控制应用(附光盘)
- 华为云BigData Pro解读: 鲲鹏云容器助力大数据破茧成蝶
- C语言再学习 -- ASCII码表(转)
- java不解压获取压缩包(zip,rar)文件列表或文本文件内容
- java ssh框架是什么_JAVA SSH框架介绍
- win7虚拟机无法读取U盘或密钥常见解决方法
- WannaRen勒索软件解密密码计算工具发布
- 基于Pytorch实现的快速人脸识别模型
- 复旦961-软件工程笔记
- 省钱兄同城跑腿小程序源码uniapp前端模版源码(小程序+APP+H5)
- 【汇正财经】上证50逆势收涨,大盘健康震固
- Bussiness 2.0:IT行业新近出现的五大新职业