{"action":"created","issue":{"url":"https://api.github.com/repos/fouber/blog/issues/5","labels_url":"https://api.github.com/repos/fouber/blog/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/fouber/blog/issues/5/comments","events_url":"https://api.github.com/repos/fouber/blog/issues/5/events","html_url":"https://github.com/fouber/blog/issues/5","id":47236928,"number":5,"title":"资源定位中md5戳的计算过程","user":{"login":"fouber","id":536297,"avatar_url":"https://avatars.githubusercontent.com/u/536297?v=3","gravatar_id":"","url":"https://api.github.com/users/fouber","html_url":"https://github.com/fouber","followers_url":"https://api.github.com/users/fouber/followers","following_url":"https://api.github.com/users/fouber/following{/other_user}","gists_url":"https://api.github.com/users/fouber/gists{/gist_id}","starred_url":"https://api.github.com/users/fouber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fouber/subscriptions","organizations_url":"https://api.github.com/users/fouber/orgs","repos_url":"https://api.github.com/users/fouber/repos","events_url":"https://api.github.com/users/fouber/events{/privacy}","received_events_url":"https://api.github.com/users/fouber/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/fouber/blog/labels/%E6%9D%82%E8%B0%88","name":"杂谈","color":"fad8c7"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":44,"created_at":"2014-10-30T06:10:27Z","updated_at":"2015-02-05T09:50:54Z","closed_at":null,"body":"要实现完整的md5计算，最终必须将task-based的流程转变成one-task形式。此处给出相关说明：\r\n\r\n假设我们有三个文件，比如 ``foo.coffee``, ``foo.scss`` 和 ``foo.png``，文本文件的内容为：\r\n\r\n* foo.coffee\r\n\r\n    ```coffee\r\n    link = document.createElement 'link'\r\n    link.src = 'foo.scss'   # 此处要引用scss文件\r\n    link.rel = 'stylesheet'\r\n    document.head.appendChild link\r\n    ```\r\n\r\n* foo.scss\r\n\r\n    ```scss\r\n    .foo {\r\n        .bar {\r\n            background: url(foo.png);  //此处要引用foo.png文件\r\n        }\r\n    }\r\n    ```\r\n\r\n最终形成这样一种资源引用关系：\r\n\r\n```text\r\n+------------+  +----------+  +---------+\r\n|            |  |          |  |         |\r\n| foo.coffee <--+ foo.scss <--+ foo.png |\r\n|            |  |          |  |         |\r\n+------------+  +----------+  +---------+\r\n```\r\n\r\n当我们要计算foo.coffee的md5戳的时候，其实是一个这样的过程：\r\n\r\n```\r\n-> 读入foo.coffee的文件内容，编译成js内容\r\n-> 分析js内容，找到资源定位标记 'foo.scss'\r\n-> 对foo.scss进行编译：\r\n    -> 读入foo.scss的文件内容，编译成css内容\r\n    -> 分析css内容，找到资源定位标记 ``url(foo.png)``\r\n    -> 对 foo.png 进行编译：\r\n        -> 读入foo.png的内容\r\n        -> 图片压缩\r\n        -> 返回图片内容\r\n    -> 根据foo.png的最终内容计算md5戳，替换url(foo.png)为url(/static/img/foo_2af0b.png)\r\n    -> 替换完毕所有资源定位标记，对css内容进行压缩\r\n    -> 返回css内容\r\n-> 根据foo.css的最终内容计算md5戳，替换'foo.scss'为 '/static/scss/foo_bae39.css'\r\n-> 替换完毕所有资源定位标记，对js内容进行压缩\r\n-> 返回js内容\r\n-> 根据最终的js内容计算md5戳，得到foo.coffee的资源url为 '/static/coffee/foo_3fc20.js'\r\n```\r\n\r\n整个计算过程是一个递归编译的过程，计算文件的摘要信息应该根据文件的 ``最终内容计算`` ，所以这个过程中要加入对sass、coffee、图片的编译和压缩处理，从而能得到真正的 ``最终内容``，这就等同于要把所有文件的处理过程整合在一次流程中，所以引入md5计算，对整个构建系统的设计影响是非常大的。\r\n\r\n在task-based的构建机制中，task之间没有办法在处理一个文件的过程中暂停，然后去对另一个文件完成完整流程处理得到内容再继续当前流程。task-based之间仅仅是任务的调度，使得部分构建信息在调度的过程中失去了“上下文环境”，无法形成对同一个文件内容的管道式处理过程。假设上述过程我们用task-based的系统构建，会变得非常复杂，有兴趣的朋友可以尝试一下，把你们的想法写在下面。\r\n\r\n用 F.I.S 包装了一个 [小工具](https://github.com/fouber/static-resource-digest) ，完整实现整个资源部署方案，并提供了源码对照：\r\n源码项目：[fouber/static-resource-digest-project · GitHub](https://github.com/fouber/static-resource-digest-project)\r\n部署项目：[fouber/static-resource-digest-project-release · GitHub](https://github.com/fouber/static-resource-digest-project-release)\r\n部署项目可以理解为线上发布的结果，可以在部署项目里查看所有资源引用的md5化处理。"},"comment":{"url":"https://api.github.com/repos/fouber/blog/issues/comments/73020160","html_url":"https://github.com/fouber/blog/issues/5#issuecomment-73020160","issue_url":"https://api.github.com/repos/fouber/blog/issues/5","id":73020160,"user":{"login":"carriey","id":10162033,"avatar_url":"https://avatars.githubusercontent.com/u/10162033?v=3","gravatar_id":"","url":"https://api.github.com/users/carriey","html_url":"https://github.com/carriey","followers_url":"https://api.github.com/users/carriey/followers","following_url":"https://api.github.com/users/carriey/following{/other_user}","gists_url":"https://api.github.com/users/carriey/gists{/gist_id}","starred_url":"https://api.github.com/users/carriey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/carriey/subscriptions","organizations_url":"https://api.github.com/users/carriey/orgs","repos_url":"https://api.github.com/users/carriey/repos","events_url":"https://api.github.com/users/carriey/events{/privacy}","received_events_url":"https://api.github.com/users/carriey/received_events","type":"User","site_admin":false},"created_at":"2015-02-05T09:50:54Z","updated_at":"2015-02-05T09:50:54Z","body":"@fouber  \r\n哈哈 ，真的非常感谢fouber，我遇到的问题都已经全部解决了，由于我们是用gulp来编译sass,handlebars以及压缩代码，然后又用fis添加版本号，感觉好绕啊，下面我要好好看看fis，准备全部转成fis，如果遇到问题还请fouber能够继续帮忙解决."}}