##简介 gulp-tinystorage是一个gulp插件，用来帮助开发者进行自动化构建，主要作用是将页面中的js加载按文件的md5进行localstorage存储，旨在减少一次或多次的js资源加载，哪怕服务端做了304相应的，依然能减少一次网络请求，还是有很强的实用价值

##安装

npm install tiny-storage

#使用场景 首先需要你的每一个js文件都是严格按照模块化思想（AMD、CMD）开发，即js文件只做模块定义，坚决不能有自执行的js模块，当然(function() {}) ()子执行是没有问题的。

需要您 的CDN支持combourl模式的加载，即能通过一个url访问加载物理上不同的模块，如： 腾讯的CDN combo加载为http://wx.gtimg.com/c/=a.js,b.js,c.js

页面的启动点是唯一的，类似如下形式。

<script type="text/javascript">
 require ('startup') ();
</script>

##用法 在gulp的构建流中使用即可，开发者在开发时可用fiddler（Mac下可使用Charles）做辅助的请求转发

对于html页面需要如下的格式

<!--tinystorage-->
<script type="text/javascript" src="./js/a.js"></script>
<script type="text/javascript" src="./js/c.js"></script>
<!--endtinystorage-->
<!--tinystorage-->
<script type="text/javascript" src="./js/b.js"></script>
<!--endtinystorage-->

用gulp进行如下的构建

gulp.src ('./index.html')
    .pipe (tinyStorage({
        combourl: function (list) {
            return 'http://www.test.com/c/=' + list.join(',')
        }
    }))
    .pipe (gulp.dest ('./dist'))

其中的comburl传入需要加载的模块文件名，你需要按照你自己的规则拼接成一个combourl。

构建后变为如此形式：

<script type="text/javascript">(function () {var list=[];if (window.localStorage) {
    if (localStorage["tinystorage-a-463c4e8c391639aaa2459d9c72c45329.js"]) {
	var sc = document.createElement("script");
	sc.text=["(",localStorage["tinystorage-a-463c4e8c391639aaa2459d9c72c45329.js"],") ()"].join("")
	document.body.appendChild(sc);
}else {
list.push ("a-463c4e8c391639aaa2459d9c72c45329.js")
}
}else {list.push ("a-463c4e8c391639aaa2459d9c72c45329.js")}
...
...

如此实现如果文件没有版本更新（md5一致）则优先从localstorage获取模块定义，否则加入到变化列表等待加载。

收集到所有发生版本变更的js文件，使用一次combourl进行一次统一加载，加载完成后会更新原有的localstorage存储（删除老的，加入新的）

这样每次发布我们只需要发布有变更的模块，避免因一个小模块的变动导致整体cache失效的问题