前端代码构建工具

NodeJs

因为前端的构建工具大多基于NodeJs，所以必须先了解NodeJs

Node 是一个服务器程序，有类似于apache的模块管理功能。比如说: Apache 能通过添加一个 PHP 模块来允许开发人员创建动态 Web 页，添加一个 SSL 模块来实现安全连接。

NodeJS是CommonJS规范的实现
CommonJS 定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

NodeJs特性

Node 运行基于服务器上的 V8 JavaScript。
V8 JavaScript 引擎是 Google 用于其 Chrome 浏览器的底层 JavaScript 引擎，引擎负责解释并执行JS代码。
V8 JavaScript引擎
Google 使用 V8 创建了一个用 C++ 编写的超快解释器，该解释器拥有另一个独特特征；您可以下载该引擎并将其嵌入任何应用程序。V8 JavaScript 引擎并不仅限于在一个浏览器中运行。
NodeJs基于事件驱动编程
许多程序员接受的教育使他们认为，面向对象编程是完美的编程设计，这使得他们对其他编程方法不屑一顾。Node 使用了一个所谓的事件驱动编程模型。
清单 1. 客户端上使用 jQuery 的事件驱动编程

$("#myButton").click(function(){
     if ($("#myTextField").val() != $(this).val())
         alert("Field must match button text");
});

实际上，服务器端和客户端没有任何区别。没错，这没有按钮点击操作，也没有向文本字段键入的操作，但在一个更高的层面上，事件正在发生。一个连接被建立，这是一个事件！数据通过连接进行接收，这也是一个事件！数据通过连接停止，这还是一个事件！

为什么这种设置类型对 Node 很理想？
JavaScript 是一种很棒的事件驱动编程语言，因为它允许使用匿名函数和闭包，更重要的是，任何写过代码的人都熟悉它的语法。事件发生时调用的回调函数可以在捕获事件处进行编写。这样可以使代码容易编写和维护，没有复杂的面向对象框架，没有接口，没有过度设计的可能性。只需监听事件，编写一个回调函数，其他事情都可以交给系统处理！

NodeJs开发环境安装

nvm是什么？
学习node，首先要安装node的环境，nvm是一款工具，使用这款工具可以很方便的下载所需版本的node文件以及npm，十分的方便。
NVM可以方便的在同一台设备上进行多个node版本之间切换

nvm-windows 最新下载地址：
https://github.com/coreybutler/nvm-windows/releases
nvm install lastest 64  //安装最新版NodeJs
nvm use 11.4.0           //使用指定版本NodeJs

NPM

NPM 使用介绍

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

为什么需要NPM

当一个网站依赖的代码越来越多，程序员发现这是一件很麻烦的事情：
去 jQuery 官网下载 jQuery
去 BootStrap 官网下载 BootStrap
去 Underscore 官网下载 Underscore
……
有些程序员就受不鸟了，一个拥有三大美德的程序员 Isaac Z. Schlueter （以下简称 Isaaz）给出一个解决方案：用一个工具把这些代码集中到一起来管理吧！
这个工具就是他用 JavaScript （运行在 Node.js 上）写的 npm，全称是 Node Package Manager

NPM具体步骤

NPM 的思路大概是这样的：
1.买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码
2.发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）
3.社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码
4.下载完的代码出现在 node_modules 目录里，可以随意使用了。
5.这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。

NPM为什么能流行起来

npm 的发展是跟 Node.js 的发展相辅相成的。
Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js，但是 Node.js 缺少一个包管理器，于是他和 npm 的作者一拍即合、抱团取暖，最终 Node.js 内置了 npm。
后来的事情大家都知道，Node.js 火了。
随着 Node.js 的火爆，大家开始用 npm 来共享 JS 代码了，于是 jQuery 作者也将 jQuery 发布到 npm 了。

全局安装与本地安装

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如
npm install express # 本地安装
npm install express -g # 全局安装
本地安装

将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
可以通过 require() 来引入本地安装的包。
全局安装
将安装包放在 /usr/local 下或者你 node 的安装目录。
可以直接在命令行里使用。

使用gulp构建less代码

创建文件gulpfile.js

var gulp = require('gulp');
less = require('gulp-less');

gulp.task('default', async ()=>{
    gulp.src('src/less/index.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));   
});

装备好less文件，执行编译命令

npm install gulp
npm install gulp-less --save-dev
gulp

附A：NodeJs入门示例

hello.js

function hello(){
    console.log('hello nodejs');
}
hello();

执行: node hello.js
helloserver.js

var httpmodule=require('http');

httpmodule.createServer(
  function(req,res){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end('<h1>Hello Nodejs</h1>');
  }
).listen(80,'127.0.0.1');

执行: node helloserver.js

附B：CommonJS示例

CommonJS规范
foo.js

'use strict';
var x = 5;
function addx (value){
    console.log( x + value );
}
module.exports.addx = addx;

main.js

'use strict'

var example = require('./foo.js');
example.addx(10);
//输出：11 
module.exports.$ = example;

执行node main.js