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