好文推荐系列--------(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
今天就到这里了。欢迎继续反馈。
好文推荐系列--------(3)GruntJS 在线重载 提升生产率至新境界的更多相关文章
- 好文推荐系列--------(2)GruntJS——重复乏味的工作总会有人做(反正我不做)
GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lin ...
- 好文推荐系列---------(4)使用Yeoman自动构建Ember项目
好文原文地址:http://segmentfault.com/a/1190000000368881 我决定学习前端开发的效率工具Yeoman.本文将首先介绍Yeoman的基本情况,接着我们会使用Yeo ...
- 好文推荐系列--------(1)bower---管理你的客户端依赖
好文原文地址:http://segmentfault.com/a/1190000000349555 编者注:我们发现了比较有趣的系列文章<30天学习30种新技术>,准备翻译,一天一篇更新, ...
- 好文推荐系列-------(5)js模块化编程
本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...
- 好文推荐系列---------JS模板引擎
这篇文章写的很清晰,不再赘述,直接上链接:http://www.tuicool.com/articles/aiaqMn
- 自学 Python 3 最好的 入门 书籍 推荐(附 免费 在线阅读 下载链接)
请大家根据自己的实际情况对号入座,挑选适合自己的 Python 入门书籍: 完全没有任何编程基础:01 号书 少量编程基础,不求全,只希望能以最快的速度入门:02 号书 少量编程基础,有一定的英文阅读 ...
- SAE Python使用经验 好文推荐
SAE Python使用经验 好文推荐 SAE Python使用经验 好文推荐
- noip推荐系列:遥控车[字符串+高精+二分答案]
[问题描述] 平平带着韵韵来到了游乐园,看到了n辆漂亮的遥控车,每辆车上都有一个唯一的名字name[i].韵韵早就迫不及待地想玩名字是s的遥控车.可是韵韵毕竟还小,她想象的名字可能是一辆车名字的前缀( ...
- 【馨儿收藏】群星《2019最新好听DJ舞曲精选》全系列【WAV/在线/百度】(持续更新)
本人作为一名音乐发烧友,一直喜欢追求无损音乐,平时在开发编程无聊的时候,希望享受音乐的过程,追求完美,我这边整理了一系列的比较不错,新的好听的无损音乐,希望大家能够喜欢. [馨儿收藏]群星<20 ...
随机推荐
- Java构建指定大小文件
Java快速创建指定大小的文件,最多的解决办法就是循环向文件里面入固定大小的空字节,但是这种方式构建大文件性能比较低下,因此有这样两种方式可供参考: Java有一个类:FileChannel,查阅AP ...
- Bootstrap(5)栅格系统
一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...
- 快速排序中BUG int 与 int *
#include <iostream>using namespace std;int QKPass(int* , int , int); //若声明为 int QKPass(int, i ...
- 利用scp 远程上传下载文件/文件夹
scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P port ...
- SideBar 选择城市时右侧边上的 选择bar
需要定义一个SideBar的视图类 在布局文件中引用 同时在布局中设置一个textView默认不可见 当触摸时才显示 在调用的Activity中 sideBar.setOnTouchingL ...
- 半吊子的STM32 — SPI通信
全双工,同步串行通信. 一般需要三条线通信: MOSI 主设备发送,从设备接收 MISO 主设备接收,从设备发送 SCLK 时钟线 多设备时,多线选取从机: 传输过程中,主从机中的移位寄存器中数据相互 ...
- Windows服务安装、卸载、启动和关闭的管理器
最近在重构公司的系统,把一些需要独立执行.并不需要人为关注的组件转换为Windows服务,Windows服务在使用的过程中有很多好处,相信这一点,就不用我多说了.但是每次都要建立Windows服务项目 ...
- 4. 深入 Python 流程控制
除了前面介绍的 while 语句,Python 还从其它语言借鉴了一些流程控制功能,并有所改变. 4.1. if 语句 也许最有名的是 if 语句.例如: >>> x = int(i ...
- libpcap 库使用(一)
参考资料: http://www.tcpdump.org/ DESCRIPTION The Packet Capture library provides a high level interface ...
- [AI]神经网络章3 损失函数
损失函数 作用 在有监督的学习中,需要衡量神经网络输出和所预期的输出之间的差异大小.这种误差函数需要能够反映出当前网络输出和实际结果之间一种量化之后的不一致程度,也就是说函数值越大,反映出模型预测的结 ...