《nodejs+gulp+webpack基础实战篇》课程笔记（一）--开开脑，走走简单的基础

chenqb

　　本课程的前期在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基础实战篇)》。本学习笔记小卒于博客园首发， 如需转载请尊重老师劳动，保留沈逸老师署名以及课程来源地址   
　　下一课：《nodejs+gulp+webpack基础实战篇》课程笔记（二）--gulp速度上手