roceys / static-resource-digest-project-release Goto Github PK

<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 &lt;path&gt;</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(&#39;path/to/file&#39;)</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>