{"id":19279307,"url":"https://github.com/fouber/static-resource-digest","last_synced_at":"2025-04-22T00:32:40.669Z","repository":{"id":22631500,"uuid":"25974185","full_name":"fouber/static-resource-digest","owner":"fouber","description":"静态资源摘要信息冗余发布工具，来自知乎问答","archived":false,"fork":false,"pushed_at":"2015-10-20T04:01:15.000Z","size":152,"stargazers_count":65,"open_issues_count":5,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-13T05:09:44.839Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.zhihu.com/question/20790576/answer/32602154","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fouber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-30T14:19:51.000Z","updated_at":"2021-12-17T18:26:43.000Z","dependencies_parsed_at":"2022-08-20T21:50:47.054Z","dependency_job_id":null,"html_url":"https://github.com/fouber/static-resource-digest","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fouber%2Fstatic-resource-digest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fouber%2Fstatic-resource-digest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fouber%2Fstatic-resource-digest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fouber%2Fstatic-resource-digest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fouber","download_url":"https://codeload.github.com/fouber/static-resource-digest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223883676,"owners_count":17219270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T21:14:32.525Z","updated_at":"2024-11-09T21:14:33.350Z","avatar_url":"https://github.com/fouber.png","language":"JavaScript","readme":"# 静态资源缓存控制编译工具\n\n前不久在 [知乎](http://zhihu.com) 上回答了一个问题：[大公司里怎样开发和部署前端代码？](http://www.zhihu.com/question/20790576/answer/32602154)。其中讲到了大公司在前端静态资源部署上的一些要求：\n\n1. 配置超长时间的本地缓存 —— 节省带宽，提高性能\n1. 采用内容摘要作为缓存更新依据 —— 精确的缓存控制\n1. 静态资源CDN部署 —— 优化网络请求\n1. 更资源发布路径实现非覆盖式发布 —— 平滑升级\n\n其中比较复杂的部分就是 ``以文件的摘要信息为依据，控制缓存更新与非覆盖式发布`` 这个细节。因此基于 [fis](http://fis.baidu.com) 包装了一个简单的命令行工具，并设立此项目，用于演示这部分功能。\n\n这个工具基于 [fis](http://fis.baidu.com) 的小工具是完全可以用作工程中的，有任何问题可以在 [这里](https://github.com/fouber/blog/issues/5) 留言。\n\n请跟着下面的步骤来使用这个命令行小工具：\n\n## 第一步：安装工具\n\n这个命令行小工具依赖 [nodejs](http://nodejs.org/) 环境，因此，请先确保本地安装了它。\n\n使用 [nodejs](http://nodejs.org/) 随带的 [npm](https://www.npmjs.org/) 包管理工具进行安装：\n\n```bash\nnpm install -g rsd\n```\n\n## 第二步：创建项目\n\n在 ``命令行`` 下clone [示例项目](https://github.com/fouber/static-resource-digest-project)，或者自己创建一个新的项目，并进入：\n\n```bash\nmkdir rsd-project  # 项目名任意\ncd rsd-project\n```\n\n在项目根目录下创建一个空的 ``fis-conf.js`` 文件，这是工具配置，什么都不用写，空着就行。\n\n然后开始在项目目录下，随意创建或添加 页面、脚本、样式、图片、字体、音频、视频等等前端资源文件，正常写前端代码吧！\n\n## 第三步：发布代码\n\n在项目根目录下执行：\n\n```bash\nrsd release --md5 --dest ../output\n```\n\n然后去到 ``../output`` 目录下去查看一下产出结果吧，所有静态资源都以md5摘要形式发布了出来，所有资源链接，我说 **所有链接**，包括html中的图片、样式、脚本以及js中的资源地址、css中的资源地址全部都加上了md5戳。\n\n上述命令中，``--md5`` 就是表示要给所有资源定位标记加上摘要信息的意思，不加这个参数就没有摘要信息处理。``--dest ../output`` 表示把代码发布到当前目录上一级的output目录中。整个这条命令还可以简写成：\n\n```bash\nrsd release -m -d ../output\n```\n\n或者进一步连写成：\n\n```bash\nrsd release -md ../output\n```\n\n## 在本地服务器中浏览发布代码\n\n你本地安装了诸如 Apache、Nginx、Lighttpd、IIS等服务器么？如果安装了，假设你的服务器 ``根目录`` 在 d:\\\\wwwroot，你可以利用rsd工具的release命令，把代码发布过去，比如：\n\n```bash\nrsd release -md d:\\wwwroot\n```\n\n这样就把代码发布到了本地服务器根目录下，然后就可以在浏览器中查看效果了！\n\n如果你本地没有安装任何服务器，你可以使用rsd内置的调试服务器，执行命令：\n\n```bash\nrsd server start\n```\n\n接下来我们同样要把代码发布到这个内置服务器中，release命令如果省略 ``--dest \u003cpath\u003e``参数，就表示把代码发布到内置服务器的根目录下：\n\n```bash\nrsd release -m\n```\n\n在浏览器中访问： http://localhost:8080 即可\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## 一些小技巧\n\n1. rsd集成了对很多前端编程语言的支持，包括：\n    * 类CSS语言：[less](http://www.lesscss.net/), [sass](http://sass-lang.com/), [scss](http://sass-lang.com/), [stylus](http://learnboost.github.io/stylus/)\n    * 类JS语言：[coffee-script](http://coffeescript.org/)\n    * 类HTML语言：[markdown](http://zh.wikipedia.org/wiki/Markdown), [jade](http://jade-lang.com/)\n    * 前端模板：[handlebars-v1.3.0](http://handlebarsjs.com/), [EJS](http://www.embeddedjs.com/)\n1. 内置了压缩器，在release的时候追加 ``-o`` 或者 ``--optimize`` 参数即可开启，压缩器包括：\n    * [clean-css](https://github.com/jakubpawlowicz/clean-css): 压缩所有类CSS语言代码\n    * [uglify-js](http://lisperator.net/uglifyjs/): 压缩所有类JS语言代码\n    * [html-minifier](http://kangax.github.io/html-minifier/): 压缩所有类HTML语言代码\n1. 还可以给资源加CDN域名，在release的时候追加 ``-D`` 或者 ``--domains`` 参数即可，域名配置写在fis-conf.js里：\n\n    ```javascript\n    // fis-conf.js\n    fis.config.set('roadmap.domain', [ 'http://localhost:8080' ]);\n    ```\n\n1. 所有常规代码中的资源定位接口都会经过工具处理，包括：\n    * 类CSS文件中：\n        * 背景图url\n        * font-face字体url\n        * ie特有的滤镜属性中的src\n    * 类JS文件中：\n        * 提供了一个叫 ``__uri('path/to/file')`` 的编译函数用于定位资源\n    * 类HTML文件中：\n        * link标签的href属性\n        * script, img, video, audio, object 等标签的src属性\n        * script标签中js代码里的资源定位标记\n        * style标签中css代码里的资源定位标记\n1. 所有资源文件可以任意相互引用，工具会处理资源定位标记，使之服从知乎回答中提到的优化策略。\n1. 还提供了资源内嵌的编译接口，用于把一个资源的内容以文本、字符串或者base64的形式嵌入到 ``任意`` 一个文本文件中。\n1. 为了不用每次保存代码就执行一下release命令，工具中提供了文件监听和浏览器自动刷新功能，只要在release的时候在追加上 ``-w`` 和 ``-L`` 两个参数即可（注意L的大小写），比如：\n\n    ```bash\n    rsd release -omwL  #压缩、加md5戳、文件监听、浏览器自动刷新\n    ```","funding_links":[],"categories":["{{ Builder }}"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffouber%2Fstatic-resource-digest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffouber%2Fstatic-resource-digest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffouber%2Fstatic-resource-digest/lists"}