<p>https://www.npmjs.com/package/rsd</p><p>https://github.com/fouber/static-resource-digest-project</p><p><br /></p><p>静态资源缓存控制编译工具</p><p>前不久在 <a href="http://zhihu.com">知乎</a> 上回答了一个问题：<a href="http://www.zhihu.com/question/20790576/answer/32602154">大公司里怎样开发和部署前端代码？</a>。其中讲到了大公司在前端静态资源部署上的一些要求：</p>配置超长时间的本地缓存 —— 节省带宽，提高性能采用内容摘要作为缓存更新依据 —— 精确的缓存控制静态资源CDN部署 —— 优化网络请求更资源发布路径实现非覆盖式发布 —— 平滑升级<p>其中比较复杂的部分就是 以文件的摘要信息为依据，控制缓存更新与非覆盖式发布 这个细节。因此基于 <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><a id="user-content-第一步：安装工具" href="https://www.npmjs.com/package/rsd#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E5%AE%89%E8%A3%85%E5%B7%A5%E5%85%B7"></a>第一步：安装工具<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>npm install -g rsd</pre><a id="user-content-第二步：创建项目" href="https://www.npmjs.com/package/rsd#%E7%AC%AC%E4%BA%8C%E6%AD%A5%EF%BC%9A%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE"></a>第二步：创建项目<p>在 命令行 下clone <a href="https://github.com/fouber/static-resource-digest-project">示例项目</a>，或者自己创建一个新的项目，并进入：</p><pre>mkdir rsd-project  # 项目名任意cd rsd-project</pre><p>在项目根目录下创建一个空的 fis-conf.js 文件，这是工具配置，什么都不用写，空着就行。</p><p>然后开始在项目目录下，随意创建或添加 页面、脚本、样式、图片、字体、音频、视频等等前端资源文件，正常写前端代码吧！</p><a id="user-content-第三步：发布代码" href="https://www.npmjs.com/package/rsd#%E7%AC%AC%E4%B8%89%E6%AD%A5%EF%BC%9A%E5%8F%91%E5%B8%83%E4%BB%A3%E7%A0%81"></a>第三步：发布代码<p>在项目根目录下执行：</p><pre>rsd release --md5 --dest ../output</pre><p>然后去到 ../output 目录下去查看一下产出结果吧，所有静态资源都以md5摘要形式发布了出来，所有资源链接，我说 所有链接，包括html中的图片、样式、脚本以及js中的资源地址、css中的资源地址全部都加上了md5戳。</p><p>上述命令中，--md5 就是表示要给所有资源定位标记加上摘要信息的意思，不加这个参数就没有摘要信息处理。--dest ../output 表示把代码发布到当前目录上一级的output目录中。整个这条命令还可以简写成：</p><pre>rsd release -m -d ../output</pre><p>或者进一步连写成：</p><pre>rsd release -md ../output</pre><a id="user-content-在本地服务器中浏览发布代码" href="https://www.npmjs.com/package/rsd#%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"></a>在本地服务器中浏览发布代码<p>你本地安装了诸如 Apache、Nginx、Lighttpd、IIS等服务器么？如果安装了，假设你的服务器 根目录 在 d:wwwroot，你可以利用rsd工具的release命令，把代码发布过去，比如：</p><pre>rsd release -md d:wwwroot</pre><p>这样就把代码发布到了本地服务器根目录下，然后就可以在浏览器中查看效果了！</p><p>如果你本地没有安装任何服务器，你可以使用rsd内置的调试服务器，执行命令：</p><pre>rsd server start</pre><p>接下来我们同样要把代码发布到这个内置服务器中，release命令如果省略 --dest 参数，就表示把代码发布到内置服务器的根目录下：</p><pre>rsd release -m</pre><p>在浏览器中访问： <a href="http://localhost:8080">http://localhost:8080</a> 即可</p><br />