本课程的前期在windows下学习,开发工具使用是webstorm。
首先请到nodejs.org下载LTS版本NODEJS.具体安装请自行google,baidu或则bing.
创建第一个文件:在项目目录下创建一个JS文件,例如test.js.
console.log('this is test'); //test.js
运行:
现在,我们学习一个函数,require(“脚本的文件名”)。
我们新建一个项目目录mynode,以后我们本课程的目录文件都会放在这个文件文件夹中。在项目目录中新建一个slib.js文件,随便写一个函数
exports.showName = function(){ console.log('xiaozu'); }//导出一个函数
然后我们再新建一个叫xiaozu.js的文件:
var getlib = require("./slib.js"); // getlib.showName();
在终端执行node
了解和使用NPM:
随同NODEJS一起安装的包管理工具。没有它则等于一切都没有。它的官方包镜像网站是https://www.npmjs.com/。例如我们使用npm下载安装最新的jquery:
我们来到我们的编辑工具,看看项目目录中发生了什么变化:
对,文件中新生成了一个node_moudules文件夹,在该文件中,有一个jquery文件夹。好了,这个地方就到此结束,这里只是演示下如何用npm下载一个jquery,(事实上大家不要去研究这个jquery 怎么在nodejs用)。
然而我们现在需要了解下nodejs如何加载自定义模块,我们用下面这个小例子还进行测试。
首先,我们还在在目录文件中的node_modules下创建一个slib文件夹,将刚才的lib.js移动进这个文件夹里,并把这个文件更名为index.js(这个其实老师有一个讲解过程,这里省略,我们只需要知道这里加载自定义模块,需要把这个文件命名为index.js就OK)。
我们在xiaozu.js中引用这个文件:
var getlib = require('slib'); getlib.showName();
nodejs会自动去寻找slib文件夹,并查看文件下下面有无index.js这个文件。我们在控制台中运行node看看结果:
package.json
到目前这个阶段,你只要认为它是一个NODEJS和NPM都会自动读取的配置文件,就可以了。
在slib文件夹中,我们手动建立一个package.json文件,它里面是个标准的JSON格式字符串
{
“main”:”aaa.js” //这代表入口
}
粗糙的玩一玩javascript的"编译"
接下来在项目文件中新建一个index.html,然后引用上面的xiaozu.js
<script src="xiaozu.js"></script>
然后打开index.html,F12查看,遗憾的发现,报错了!
因为网页中,还不支持require(不代表未来不支持),此时会报 “require没有定义”这个错误。既然node能运行shenyi.js,那么我们是否通过 nodejs把require出来的东西给生成一个啥文件呢?
现在来看看能不能把xiaozu.js里到的值打印出来?
var getlib = require('slib'); getlib.showName(); for(var xxoo in getlib){ console.log(getlib[xxoo]); }
好了,到这一步,我们需要先认识下NODEJS的fs模块。这是专门用来处理文件的内置模块。
var file = require('fs');
file.readFile //读文件
file.writeFile //写文件
file.appendFile //追加文件
我们要干的其实是appendFile。
appendFile( filename, data, [options], callback ); //file.appendFile(“build.js”,”自己拼凑些内容”) ,其他回调啥的一律不写,如果特别有兴趣研究这个,请百度或看手册。我们暂时不用去纠结这些.
我们在xiaozu.js文件中这样写:
var getlib = require('slib'); //把生成的内容读取出来,生成一个新的文件。 var file = require('fs'); file.writeFile("build.js",""); function genCode(key,value){ return 'var '+key+'='+value+';\n'; } for(var xxoo in getlib){ file.appendFile("build.js",genCode(xxoo,getlib[xxoo])); //console.log(getlib[xxoo]); } file.appendFile("build.js","showName();\n");
在node中运行这个xiaozu.js,我们看看我们的项目目录
这里自动生成了一个build.js文件,我们在方才新建的index.html文件引入
<script src="build.js"></script>
我们再打开chorme,按下F12:
css也能"编译"?图片也能“编译”?
当然目前我们的做法完全是为了后面的学习打基础、开脑。请大家不要过于执着。
新建一个test.css,写上{}来研究下如果是CSS文件咱该如何办?
简单点就一句:*{color:blue;},然后我们在xiaozu.js文件中加入
file.readFile("./test.css",function(err,data){ if(err){ //代表出错,简单起见,这课俺们啥都不写 }else{ file.appendFile("build.js","document.write('<style>"+data+"</style>')"); } });
同样,node中运行xiaozu.js。看看build.js生成了啥
最后我们打开index.html看看效果,当然你要写点东西才能看出来,我们并没有引入.css文件,但是样式还是得到了应用。
OK,现在我们给CSS中引入一张图片,*{color:blue;background:url("./m.jpg");}
我们先用简单的几个步骤演示下,这个思路。
//我们在xiaozu.js中新增红色代码部分 var getlib = require('slib'); //把生成的内容读取出来,生成一个新的文件。 var file = require('fs'); file.writeFile("build.js",""); function genCode(key,value){ return 'var '+key+'='+value+';\n'; } file.readFile("./test.css",function(err,data){ if(err){ //代表出错,简单起见,这课俺们啥都不写 }else{ /*利用NODEJS读取出css 后,用正则读取图片路径 为了演示方便,我们就读取后缀为jpg的内容。*/ var pattern=/['|"](.*\.jpg)['|"]/g; var res; while(res=pattern.exec(data.toString())) //这段并不完善的正则就可以匹配出一般格式的图片内容(jpg).且返回的是一个数组 { var getImg = file.readFileSync(res[1]); //获取图片的路径和值 //奇幻图片成base64格式 data = data.toString().replace(res[1],"data:image/jpg;base64,"+getImg.toString("base64").trim()); file.appendFile("build.js","document.write('<style>"+data+"</style>')"); } } }); for(var xxoo in getlib){ file.appendFile("build.js",genCode(xxoo,getlib[xxoo])); //console.log(getlib[xxoo]); } file.appendFile("build.js","showName();\n");
来看看生成的build文件中,我们的图片文件是什么样:
这里是思路:首先我们把图片读取出来,然后非常方便的利用 toString(‘base64’)就可以把图片变成base64编码. background:url(“./m.jpg”); 如果使用base64显示(格式如下) background:url(“data:image/jpg;base64,xxxoo”)
这样做的好处和注意点:1、减少服务器的请求。2、写入CSS后,可以压缩(gzip、各种方法)。3、如果是频繁需要更新的图片不建议这么做。4、IE6、7是不支持的(我们也可以无视)。
下一节课,我们将快速的学习使用gulp.
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享。但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的《前端开发速学成财(nodejs+gulp+webpack基础实战篇)》。本学习笔记小卒于博客园首发, 如需转载请尊重老师劳动,保留沈逸老师署名以及课程来源地址