Day 7: GruntJS 在线重载 提升生产率至新境界
在我的“30天学习30种技术”挑战的第5天,我提到了如何使用GruntJS来执行重复性任务。今天,我们将把上次提到的例子扩展一下,加入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最重要的插件之一。这个插件可以在后台运行,监视配置好了的文件改动。使用如下的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
今天就到这里了。欢迎继续反馈。
原文 Day 7: GruntJS LiveReload--Take Productivity to the Next Level
翻译 SegmentFault
Day 7: GruntJS 在线重载 提升生产率至新境界相关推荐
- 好文推荐系列--------(3)GruntJS 在线重载 提升生产率至新境界
好文原文地址:http://segmentfault.com/a/1190000000354555 本文将首先介绍grunt-markdown插件如何配合HTML模板使用,接着我将介绍如何使用grun ...
- 再读德鲁克#2 如何提升生产率
一家500人的北京IT公司,专门做企业大数据服务.为了加强管理,他们利用项目管理系统做项目挣值分析(Earned Value),要求团队先做预算,然后按项目任务完成情况报工,监控实际与计划对比.这就 ...
- android平板商店,谷歌或推在线商店提升Android平板电脑销量
新浪科技讯 北京时间4月5日凌晨消息,据<福布斯>杂志网络版报道,谷歌可能推出在线商店以提升Android平板电脑销量和市场份额,平板电脑市场正快速增长,但该市场目前被苹果iPad统治.虽 ...
- 经营分析师如何进一步提升自己的境界
注:本文发表于2016年,自己当时未标注原创,因此这里重新发布一下. 经营分析师是企业中最为苦逼的群体之一,我想没人能否认,只要是业内人士,你懂得!经营分析师没有标准定义,在你的企业,以数据分析报告为 ...
- 30 天学习 30 种新技术系列
编者注:我们发现了比较有趣的系列文章<30 天学习 30 种新技术>,准备翻译,一天一篇更新,年终礼包.以下是译文,英文标题表示还未翻译,附原文链接:中文标题表示已翻译,附译文链接. 更新 ...
- 盈客在线陈清平:数据驱动让传统餐饮业焕发新活力
传统的餐饮行业如何能做到数据驱动? 合理运用神策数据的数据概览,漏斗分析,留存分析,用户分群等功能,就能让餐厅营业额翻倍增长. 盈客在线是一家专注于餐饮行业会员营销服务的企业,目前服务的餐饮品牌超过 ...
- 今年阿里双十一提升广告点击率居然用的是这种算法?!
文 | 阿里巴巴定向广告团队 源 | 知乎 写在前面的碎碎念 这篇文章主要是介绍我们在CTR建模领域最新的工作CAN,CAN已经在双十一前全面在阿里定向广告落地,在线效果提升非常显著.一般文章会以事后 ...
- 敏捷开发绩效管理之五:敏捷开发生产率(上)(故事点估算)
这是敏捷开发绩效管理的第五篇.(之一,之二,之三,之四,之五,之六,之七) 度量敏捷开发的生产率一直是个难题,确切说度量任何开发方法的生产率都是一个难题,但它实际上有答案,这个答案是本文的主要内容. ...
- 今日头条电脑版官方版_imclass电脑版下载-imclass在线教室pc版下载 v1.0.2 官方版...
ImClass电脑版是专为师生打造的在线教室软件,突破传统线下教室教学时间和空间上的限制,打造线上教室,随时在线上课,为教师和学生提供了丰富的线上授课.学习工具,包括互动白板.在线视频.共享桌面等等, ...
最新文章
- STL--自定义类型的排序
- 今晚8点开播 | 微信高级研究员解析深度学习在NLP中的发展和应用
- 如何在Linux中运用vim命令轻松编辑文件
- 【转】mysql增量备份恢复实战企业案例
- 进阶学习(3.12) Operand Pattern 装饰器模式
- python一千行入门代码-用Python三十行代码快速生成1000条随机评教内容
- 操作系统:优先级反转
- 修饰符private和protected详解以及调用Object类Clone方法报错:clone() has protected access in java.lang.Object的原因及解决方案
- ant 安装及基础教程 !
- 计网 --- 域名服务系统:因特网的目录服务
- 02-第二章 基本类型
- sas分组计数_SAS读书笔记:SQL
- 高性能python_[转]【原创】High Performance Python(Python 高性能计算)(一)
- 【python】日志模块以及日志组件使用
- zTree根据ID选中节点
- 用网络附加存储(NAS)构建(本地及远程)、数据容灾
- SylixOS armv8 mmu
- imx6 android8流畅,NXP iMX8和iMX6 ARM处理器网络性能对比
- utils 定时器 (一) 多级时间轮
- vue resource的应用