《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+';
';
}
for(var xxoo in getlib){
    file.appendFile("build.js",genCode(xxoo,getlib[xxoo]));
    //console.log(getlib[xxoo]);
}
file.appendFile("build.js","showName();
");

　　在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+';
';
}
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();
");

　　来看看生成的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速度上手