前端速学成财:第五课-图片也能"编译"?

本节知识点:
1.CSS图片引用
2.NodeJs读取图片
3.把图片替换成Base64编码

回顾:
上节课我们自己模拟了一种粗糙的自己模拟的”编译”概念:
当我们应用CSS的时候，就用NODEJS读取，然后写入JS中
(目前我们的做法完全是为了后面的学习打基础、开脑。请大家不要过于执着)

正文:
如果我的css里面有图片的应用，譬如
*{color:red;background:url("./s.png")}

我们首先要知道，在实际网站运行中，一个图片也会增加一次http请求。那怎么处理比较好呢？
我们可以把图片变成Base64编码来加载.

第一步：用正则取出图片路径

var pattern=/['|"](.*\.png)['|"]/g;
var res;
while(res=pattern.exec(data.toString()))
{
    //res[0] 包含双(单)引号 res[1]不包含
    console.log(res[1]);
}

上节课读文件readFile是用的异步的,此时 我们要用同步的方式来读图片

file.readFile('./test.css','utf-8',function(err,data){
    if(err){
    }else{
        var pattern=/['|"](.*\.png)['|"]/g;
        var res;
        while(res=pattern.exec(data.toString())) {
            //res[0] 包含双(单)引号 res[1]不包含
            var getImg = file.readFileSync(res[1]).toString("base64");
            data=data.toString().replace(res[1],"data:image/jpg;base64,"+getImg);
            file.appendFile('build.js',"document.write('<style>"+data+"</style>')");
        }
    }
})

用Base64编码代替图片的好处和注意点:
1.减少服务器的请求(变成Base64编码会缓存到本地,再次刷新访问 不会去请求服务器)
2.写入CSS后,可以压缩(gzip,各种方法)
3.如果是频繁需要更新的图片不建议这么做
4.IE6、7是不支持的