fouber / static-resource-digest-project

静态资源摘要信息冗余发布演示项目

静态资源缓存控制编译工具

前不久在 知乎 上回答了一个问题：大公司里怎样开发和部署前端代码？。其中讲到了大公司在前端静态资源部署上的一些要求：

1. 配置超长时间的本地缓存 —— 节省带宽，提高性能
2. 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
3. 静态资源CDN部署 —— 优化网络请求
4. 更资源发布路径实现非覆盖式发布 —— 平滑升级

其中比较复杂的部分就是 以文件的摘要信息为依据，控制缓存更新与非覆盖式发布 这个细节。因此基于 fis 包装了一个简单的命令行工具，并设立此项目，用于演示这部分功能。

这个工具基于 fis 的小工具是完全可以用作工程中的，有任何问题可以在 这里 留言。

请跟着下面的步骤来使用这个命令行小工具：

第一步：安装工具

这个命令行小工具依赖 nodejs 环境，因此，请先确保本地安装了它。

使用 nodejs 随带的 npm 包管理工具进行安装：

npm install -g rsd

第二步：创建项目

在 命令行 下clone本仓库，或者自己创建一个新的项目，并进入：

mkdir rsd-project  # 项目名任意
cd rsd-project

在项目根目录下创建一个空的 fis-conf.js 文件，这是工具配置，什么都不用写，空着就行。

然后开始在项目目录下，随意创建或添加 页面、脚本、样式、图片、字体、音频、视频等等前端资源文件，正常写前端代码吧！

第三步：发布代码

在项目根目录下执行：

rsd release --md5 --dest ../output

然后去到 ../output 目录下去查看一下产出结果吧，所有静态资源都以md5摘要形式发布了出来，所有资源链接，我说 所有链接，包括html中的图片、样式、脚本以及js中的资源地址、css中的资源地址全部都加上了md5戳。

上述命令中，--md5 就是表示要给所有资源定位标记加上摘要信息的意思，不加这个参数就没有摘要信息处理。--dest ../output 表示把代码发布到当前目录上一级的output目录中。整个这条命令还可以简写成：

rsd release -m -d ../output

或者进一步连写成：

rsd release -md ../output

在本地服务器中浏览发布代码

你本地安装了诸如 Apache、Nginx、Lighttpd、IIS等服务器么？如果安装了，假设你的服务器 根目录 在 d:\wwwroot，你可以利用rsd工具的release命令，把代码发布过去，比如：

rsd release -md d:\wwwroot

这样就把代码发布到了本地服务器根目录下，然后就可以在浏览器中查看效果了！

如果你本地没有安装任何服务器，你可以使用rsd内置的调试服务器，执行命令：

rsd server start

接下来我们同样要把代码发布到这个内置服务器中，release命令如果省略 --dest <path>参数，就表示把代码发布到内置服务器的根目录下：

rsd release -m

在浏览器中访问： http://localhost:8080 即可

一些小技巧

1. rsd集成了对很多前端编程语言的支持，包括：

   • 类CSS语言：less, sass, scss, stylus
   • 类JS语言：coffee-script
   • 类HTML语言：markdown, jade
   • 前端模板：handlebars-v1.3.0, EJS

2. 内置了压缩器，在release的时候追加 -o 或者 --optimize 参数即可开启，压缩器包括：

   • clean-css: 压缩所有类CSS语言代码
   • uglify-js: 压缩所有类JS语言代码
   • html-minifier: 压缩所有类HTML语言代码

3. 还可以给资源加CDN域名，在release的时候追加 -D 或者 --domains 参数即可，域名配置写在fis-conf.js里：

   // fis-conf.js
   fis.config.set('roadmap.domain', [ 'http://localhost:8080' ]);

4. 所有常规代码中的资源定位接口都会经过工具处理，包括：

   • 类CSS文件中：
     • 背景图url
     • font-face字体url
     • ie特有的滤镜属性中的src
   • 类JS文件中：
     • 提供了一个叫 __uri('path/to/file') 的编译函数用于定位资源
   • 类HTML文件中：
     • link标签的href属性
     • script, img, video, audio, object 等标签的src属性
     • script标签中js代码里的资源定位标记
     • style标签中css代码里的资源定位标记

5. 所有资源文件可以任意相互引用，工具会处理资源定位标记，使之服从知乎回答中提到的优化策略。

6. 还提供了资源内嵌的编译接口，用于把一个资源的内容以文本、字符串或者base64的形式嵌入到 任意 一个文本文件中。

7. 为了不用每次保存代码就执行一下release命令，工具中提供了文件监听和浏览器自动刷新功能，只要在release的时候在追加上 -w 和 -L 两个参数即可（注意L的大小写），比如：

   rsd release -omwL  #压缩、加md5戳、文件监听、浏览器自动刷新

关于这个小工具

它的原码在 这里。是的，就这么一点点代码，花了大概半小时写完的，因为一切都在 fis 中集成好了，我只是追加几个语言编译插件而已。

static-resource-digest-project's Issues

LESS 文件中遇到 @-moz-keyframes 不能识别

LESS 文件里还有 @-moz-keyframes 之类的东西就不能识别，然后自动退出了
提示：[ERROR] parser.less: Unrecognised input [/Path/To/Less.less:65:0]

安装rds报错

使用 -o 参数时，提示 error: Not a PNG file

你好，我在使用的时候加上了 -o 参数，完整的命令：

rsd release -omwd ../server

然后会有一个提示：

δ 48ms

 Ω ...................................  error: Not a PNG file
  error: rwpng_read_image() error 25
File: stdin.png
....................................................................................................... 14805ms

我的项目里根本没有 stdin.png 这个文件也没有引用，不知道是怎么回事

有没有关于如何增量更新的方法求教，我用的是Gulp~~

资源文件替换对行内样式无效

如果图片的的引用是在行内样式中，替换不生效

rsd是什么？

rsd是什么？和fis是一个东西吗？

npm install不成功

npm install -g rsd

然后rsd的命令没在全局命令里出现，是我打开的姿势不对？

使用 -o 参数，fis-conf.js 里对 html 不优化，则不会自动修改 js 引用

在项目里使用 -o 参数，由于不支持项目的 html 模板，所以对 html 不使用优化。这样就导致 uglify 了 js 文件后，不会修改 html 中对 js 的引用，依旧引用以前的 js，没有引用 uglify 后改变了 MD5 的js。

在 sass 中使用 keyframes 动画的时候，提示 no mixing named keyframes

你好，
我在我的 scss 文件里这么写：

@import "compass/css3";

@include keyframes(breatharrow) {
  0%    {@include opacity(0.2);}
  25%   {@include opacity(0.3);}
  50%   {@include opacity(0.4);}
  100%  {@include opacity(0.5);}
}

编译的时候提示
no mixin named keyframes

安装rsd报错

安装fsd的时候出错。

如图：

这样部署真感觉不方便管理图片

所有图片为什么不发布到同一级目录下管理。

现在的是Css和图片都是同一级目录的。