-
Notifications
You must be signed in to change notification settings - Fork 38
/
index.html
136 lines (134 loc) · 9.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype <html>
<head>
<meta charset="utf-8">
<title>静态资源缓存控制</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/css/font-awesome_ecf86ee.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/css/markdown_5281bc3.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/css/github_44d656a.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/scss/foo_1edc3ce.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/sass/foo_12ff0f9.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/less/foo_da85e6f.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/style/stylus/foo_aa58274.css">
</head>
<body>
<div class="markdown-body">
<!-- 嵌入页面片段 -->
<h1 id="%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E7%BC%93%E5%AD%98%E6%8E%A7%E5%88%B6%E7%BC%96%E8%AF%91%E5%B7%A5%E5%85%B7">静态资源缓存控制编译工具</h1>
<p>前不久在 <a href="http://zhihu.com">知乎</a> 上回答了一个问题：<a href="http://www.zhihu.com/question/20790576/answer/32602154">大公司里怎样开发和部署前端代码？</a>。其中讲到了大公司在前端静态资源部署上的一些要求：</p>
<ol>
<li>配置超长时间的本地缓存 —— 节省带宽，提高性能</li>
<li>采用内容摘要作为缓存更新依据 —— 精确的缓存控制</li>
<li>静态资源CDN部署 —— 优化网络请求</li>
<li>更资源发布路径实现非覆盖式发布 —— 平滑升级</li>
</ol>
<p>其中比较复杂的部分就是 <code>以文件的摘要信息为依据，控制缓存更新与非覆盖式发布</code> 这个细节。因此基于 <a href="http://fis.baidu.com">fis</a> 包装了一个简单的命令行工具，并设立此项目，用于演示这部分功能。</p>
<p>这个工具基于 <a href="http://fis.baidu.com">fis</a> 的小工具是完全可以用作工程中的，有任何问题可以在 <a href="https://github.com/fouber/blog/issues/5">这里</a> 留言。</p>
<p>请跟着下面的步骤来使用这个命令行小工具：</p>
<h2 id="%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E5%AE%89%E8%A3%85%E5%B7%A5%E5%85%B7">第一步：安装工具</h2>
<p>这个命令行小工具依赖 <a href="http://nodejs.org/">nodejs</a> 环境，因此，请先确保本地安装了它。</p>
<p>使用 <a href="http://nodejs.org/">nodejs</a> 随带的 <a href="https://www.npmjs.org/">npm</a> 包管理工具进行安装：</p>
<pre><code class="hljs bash">npm install -g rsd
</code></pre>
<h2 id="%E7%AC%AC%E4%BA%8C%E6%AD%A5%EF%BC%9A%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE">第二步：创建项目</h2>
<p>在 <code>命令行</code> 下clone本仓库，或者自己创建一个新的项目，并进入：</p>
<pre><code class="hljs bash">mkdir rsd-project <span class="hljs-comment"># 项目名任意</span>
<span class="hljs-built_in">cd</span> rsd-project
</code></pre>
<p>在项目根目录下创建一个空的 <code>fis-conf.js</code> 文件，这是工具配置，什么都不用写，空着就行。</p>
<p>然后开始在项目目录下，随意创建或添加 页面、脚本、样式、图片、字体、音频、视频等等前端资源文件，正常写前端代码吧！</p>
<h2 id="%E7%AC%AC%E4%B8%89%E6%AD%A5%EF%BC%9A%E5%8F%91%E5%B8%83%E4%BB%A3%E7%A0%81">第三步：发布代码</h2>
<p>在项目根目录下执行：</p>
<pre><code class="hljs bash">rsd release --md5 --dest ../output
</code></pre>
<p>然后去到 <code>../output</code> 目录下去查看一下产出结果吧，所有静态资源都以md5摘要形式发布了出来，所有资源链接，我说 <strong>所有链接</strong>，包括html中的图片、样式、脚本以及js中的资源地址、css中的资源地址全部都加上了md5戳。</p>
<p>上述命令中，<code>--md5</code> 就是表示要给所有资源定位标记加上摘要信息的意思，不加这个参数就没有摘要信息处理。<code>--dest ../output</code> 表示把代码发布到当前目录上一级的output目录中。整个这条命令还可以简写成：</p>
<pre><code class="hljs bash">rsd release -m <span class="hljs-operator">-d</span> ../output
</code></pre>
<p>或者进一步连写成：</p>
<pre><code class="hljs bash">rsd release -md ../output
</code></pre>
<h2 id="%E5%9C%A8%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%AD%E6%B5%8F%E8%A7%88%E5%8F%91%E5%B8%83%E4%BB%A3%E7%A0%81">在本地服务器中浏览发布代码</h2>
<p>你本地安装了诸如 Apache、Nginx、Lighttpd、IIS等服务器么？如果安装了，假设你的服务器 <code>根目录</code> 在 d:\wwwroot，你可以利用rsd工具的release命令，把代码发布过去，比如：</p>
<pre><code class="hljs bash">rsd release -md d:\wwwroot
</code></pre>
<p>这样就把代码发布到了本地服务器根目录下，然后就可以在浏览器中查看效果了！</p>
<p>如果你本地没有安装任何服务器，你可以使用rsd内置的调试服务器，执行命令：</p>
<pre><code class="hljs bash">rsd server start
</code></pre>
<p>接下来我们同样要把代码发布到这个内置服务器中，release命令如果省略 <code>--dest <path></code>参数，就表示把代码发布到内置服务器的根目录下：</p>
<pre><code class="hljs bash">rsd release -m
</code></pre>
<p>在浏览器中访问： <a href="http://localhost:8080">http://localhost:8080</a> 即可</p>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<h2 id="%E4%B8%80%E4%BA%9B%E5%B0%8F%E6%8A%80%E5%B7%A7">一些小技巧</h2>
<ol>
<li>rsd集成了对很多前端编程语言的支持，包括：<ul>
<li>类CSS语言：<a href="http://www.lesscss.net/">less</a>, <a href="http://sass-lang.com/">sass</a>, <a href="http://sass-lang.com/">scss</a>, <a href="http://learnboost.github.io/stylus/">stylus</a></li>
<li>类JS语言：<a href="http://coffeescript.org/">coffee-script</a></li>
<li>类HTML语言：<a href="http://zh.wikipedia.org/wiki/Markdown">markdown</a>, <a href="http://jade-lang.com/">jade</a></li>
<li>前端模板：<a href="http://handlebarsjs.com/">handlebars-v1.3.0</a>, <a href="http://www.embeddedjs.com/">EJS</a></li>
</ul>
</li>
<li>内置了压缩器，在release的时候追加 <code>-o</code> 或者 <code>--optimize</code> 参数即可开启，压缩器包括：<ul>
<li><a href="https://github.com/jakubpawlowicz/clean-css">clean-css</a>: 压缩所有类CSS语言代码</li>
<li><a href="http://lisperator.net/uglifyjs/">uglify-js</a>: 压缩所有类JS语言代码</li>
<li><a href="http://kangax.github.io/html-minifier/">html-minifier</a>: 压缩所有类HTML语言代码</li>
</ul>
</li>
<li><p>还可以给资源加CDN域名，在release的时候追加 <code>-D</code> 或者 <code>--domains</code> 参数即可，域名配置写在fis-conf.js里：</p>
<pre><code class="hljs javascript"> <span class="hljs-comment">// fis-conf.js</span>
fis.config.set(<span class="hljs-string">'roadmap.domain'</span>, [ <span class="hljs-string">'http://localhost:8080'</span> ]);
</code></pre>
</li>
<li><p>所有常规代码中的资源定位接口都会经过工具处理，包括：</p>
<ul>
<li>类CSS文件中：<ul>
<li>背景图url</li>
<li>font-face字体url</li>
<li>ie特有的滤镜属性中的src</li>
</ul>
</li>
<li>类JS文件中：<ul>
<li>提供了一个叫 <code>__uri('path/to/file')</code> 的编译函数用于定位资源</li>
</ul>
</li>
<li>类HTML文件中：<ul>
<li>link标签的href属性</li>
<li>script, img, video, audio, object 等标签的src属性</li>
<li>script标签中js代码里的资源定位标记</li>
<li>style标签中css代码里的资源定位标记</li>
</ul>
</li>
</ul>
</li>
<li>所有资源文件可以任意相互引用，工具会处理资源定位标记，使之服从知乎回答中提到的优化策略。</li>
<li>还提供了资源内嵌的编译接口，用于把一个资源的内容以文本、字符串或者base64的形式嵌入到 <code>任意</code> 一个文本文件中。</li>
<li><p>为了不用每次保存代码就执行一下release命令，工具中提供了文件监听和浏览器自动刷新功能，只要在release的时候在追加上 <code>-w</code> 和 <code>-L</code> 两个参数即可（注意L的大小写），比如：</p>
<pre><code class="hljs bash"> rsd release -omwL <span class="hljs-comment">#压缩、加md5戳、文件监听、浏览器自动刷新</span>
</code></pre>
</li>
</ol>
<h2 id="%E5%85%B3%E4%BA%8E%E8%BF%99%E4%B8%AA%E5%B0%8F%E5%B7%A5%E5%85%B7">关于这个小工具</h2>
<p>它的原码在 <a href="https://github.com/fouber/static-resource-digest">这里</a>。是的，就这么一点点代码，花了大概半小时写完的，因为一切都在 <a href="http://fis.baidu.com">fis</a> 中集成好了，我只是追加几个语言编译插件而已。</p>
<hr>
<blockquote>
<p>以下内容来自 <code>html/markdown/foo.md</code> 文件</p>
</blockquote>
<h1 id="%E8%BF%99%E6%98%AF%20h1">这是 H1</h1>
<h2 id="%E8%BF%99%E6%98%AF%20h2">这是 H2</h2>
<h3 id="%E8%BF%99%E6%98%AF%20h3">这是 H3</h3>
<p><img src="http://localhost:8080/html/markdown/markdown_8396c3f.jpg" alt="一个图片"></p>
<ul>
<li>呵呵</li>
<li>哈哈</li>
</ul>
<hr/><div><blockquote>以下内容来自<code>html/jade/foo.jade</code></blockquote><div style="background:#00a86b"><img src="http://localhost:8080/html/jade/jade_2047926.png"/></div><h1>Jade - node template engine</h1><div id="container" class="col"><p>Get on it!</p><p>Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.</p></div></div>
</div>
<script type="text/javascript" src="http://localhost:8080/script/js/handlebars.runtime-v1.3.0_c7420cd.js"></script>
<script type="text/javascript" src="http://localhost:8080/script/js/use-templates_1958c4e.js"></script>
<script type="text/javascript" src="http://localhost:8080/script/coffeescript/foo_7d83d78.js"></script>
</body>
</html>