本节知识点:
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是不支持的