前端速学成财:第四课-粗糙的玩一玩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
- 前端速学成财:第四课-粗糙的玩一玩css的"编译"
- 前端速学成财:第三课-粗糙的玩一玩javascript的"编译"
- 前端速学成财:第九课-webpack篇:编译JS的正确姿势
- 前端速学成财:第五课-图片也能"编译"?
- 前端速学成财:第七课-前端"清洁大妈"的产生
- 前端速学成财:第二课-知识点速学
- 前端速学成财:第一课-JavaScript历史
- 前端速学成财:第六课-gulp快速上手
- 粗糙的玩一玩javascript的"编译"(2)css也能"编译"?
- 粗糙的玩一玩javascript的"编译"(1)
- 前端速学成财:第十一课-实战演练:用gulp 构建前端页面(1)---静态构建
- 前端速学成财:第八课-速玩JS文件合并和压缩
- 前端速学成财:第八课-速玩JS文件合并和压缩
- 前端速学成财:第十课-混合篇:webpack和gulp"勾结"初步
- 前端速学成财:第十二课-实战演练:用gulp像CMS那样生成新闻页面
- 前端速学成财:第十四课-实战演练:用gulp+webpack构建用户登录(1)
- 前端速学成财:第十三课-实战演练:用gulp+EJS像CMS那样生成完整新闻内容面
- 粗糙的级联选择
- java设计模式_适配器模式
- oc 和 h5中js 的交互
- 23种java设计模式之命令模式
- Android中ContentProvider的简单使用
- New Document
- 前端速学成财:第四课-粗糙的玩一玩css的"编译"
- 脉搏测量 心电波形 心率
- mysql模糊查询在jdbc中查不到内容,?两侧没有加空格
- DP-Common Subsequence
- HDU 5780 (欧拉函数)
- Surrounded Regions
- swift的数据类型、运算符和元组的简单使用
- HDU 4544 湫湫系列故事——消灭兔子 (贪心+优先队列)
- CloudVisor译稿