前端速学成财:第四课-粗糙的玩一玩css的"编译"

来源:互联网 发布:数据库应用系统饭店 编辑:程序博客网 时间:2024/06/10 00:28

1.读取文件的函数
2.发明个编译CSS的过程

上节课我们模拟了一个所以的”JS编译”,今天的问题是:如果是CSS文件咋办?

我们先新建个test.css

*{color:red}

如果正常引用 那么网页文字全部变成红色.
如果我们按照上节课的思路.require css文件进来 发现会报错的.它会把require进来的文件当前脚本来解析。

那么CSS到底要怎么”编译”呢?
很简单,为了简化思路我们做如下步骤。

1、 如果是js文件,正常的require
2、如果是css文件,则直接读取文件内容
3、然后往编译文件里写个脚本“加入style”

以上只不过是 一个思路借鉴。不要太过于纠结

最后代码:

var getlib=require('sxin');var getage=require("./bb");var file=require('fs');function genCode(key,value){    return 'var '+key+'='+value+';\n';}file.writeFile("build.js","");for(var i=0;i< global.process.mainModule.children.length;i++){    var child=global.process.mainModule.children[i];    for(var bb in child.exports)// child.exports就是我们导出的属性        file.appendFile('build.js',genCode(bb,child.exports[bb]));}file.readFile('./test.css','utf-8',function(err,data){    if(err){    }else{        file.appendFile('build.js',"document.write('<style>"+data+"</style>')");    }})console.log("生成成功");
0 0