前端代碼構(gòu)建工具

NodeJs

因?yàn)榍岸说臉?gòu)建工具大多基于NodeJs靡狞，所以必須先了解NodeJs

Node 是一個(gè)服務(wù)器程序，有類似于apache的模塊管理功能甸祭。比如說: Apache 能通過添加一個(gè) PHP 模塊來允許開發(fā)人員創(chuàng)建動(dòng)態(tài) Web 頁乾胶，添加一個(gè) SSL 模塊來實(shí)現(xiàn)安全連接。

NodeJS是CommonJS規(guī)范的實(shí)現(xiàn)
CommonJS 定義的模塊分為: 模塊標(biāo)識(module)瓢娜、模塊定義(exports) 、模塊引用(require)

NodeJs特性

Node 運(yùn)行基于服務(wù)器上的 V8 JavaScript礼预。
V8 JavaScript 引擎是 Google 用于其 Chrome 瀏覽器的底層 JavaScript 引擎眠砾，引擎負(fù)責(zé)解釋并執(zhí)行JS代碼。
V8 JavaScript引擎
Google 使用 V8 創(chuàng)建了一個(gè)用 C++ 編寫的超快解釋器托酸，該解釋器擁有另一個(gè)獨(dú)特特征褒颈；您可以下載該引擎并將其嵌入任何應(yīng)用程序。V8 JavaScript 引擎并不僅限于在一個(gè)瀏覽器中運(yùn)行获高。
NodeJs基于事件驅(qū)動(dòng)編程
許多程序員接受的教育使他們認(rèn)為哈肖，面向?qū)ο缶幊淌峭昝赖木幊淘O(shè)計(jì)，這使得他們對其他編程方法不屑一顧念秧。Node 使用了一個(gè)所謂的事件驅(qū)動(dòng)編程模型淤井。
清單 1. 客戶端上使用 jQuery 的事件驅(qū)動(dòng)編程

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

實(shí)際上，服務(wù)器端和客戶端沒有任何區(qū)別摊趾。沒錯(cuò)币狠，這沒有按鈕點(diǎn)擊操作，也沒有向文本字段鍵入的操作砾层，但在一個(gè)更高的層面上漩绵，事件正在發(fā)生。一個(gè)連接被建立肛炮，這是一個(gè)事件止吐！數(shù)據(jù)通過連接進(jìn)行接收，這也是一個(gè)事件侨糟！數(shù)據(jù)通過連接停止碍扔，這還是一個(gè)事件！

為什么這種設(shè)置類型對 Node 很理想秕重？
JavaScript 是一種很棒的事件驅(qū)動(dòng)編程語言不同，因?yàn)樗试S使用匿名函數(shù)和閉包，更重要的是，任何寫過代碼的人都熟悉它的語法二拐。事件發(fā)生時(shí)調(diào)用的回調(diào)函數(shù)可以在捕獲事件處進(jìn)行編寫服鹅。這樣可以使代碼容易編寫和維護(hù)，沒有復(fù)雜的面向?qū)ο罂蚣馨傩拢瑳]有接口企软，沒有過度設(shè)計(jì)的可能性。只需監(jiān)聽事件饭望，編寫一個(gè)回調(diào)函數(shù)澜倦，其他事情都可以交給系統(tǒng)處理！

NodeJs開發(fā)環(huán)境安裝

nvm是什么杰妓？
學(xué)習(xí)node，首先要安裝node的環(huán)境碘勉，nvm是一款工具巷挥，使用這款工具可以很方便的下載所需版本的node文件以及npm，十分的方便验靡。
NVM可以方便的在同一臺設(shè)備上進(jìn)行多個(gè)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服務(wù)器下載別人編寫的第三方包到本地使用胜嗓。
允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用高职。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。

為什么需要NPM

當(dāng)一個(gè)網(wǎng)站依賴的代碼越來越多辞州，程序員發(fā)現(xiàn)這是一件很麻煩的事情：
去 jQuery 官網(wǎng)下載 jQuery
去 BootStrap 官網(wǎng)下載 BootStrap
去 Underscore 官網(wǎng)下載 Underscore
……
有些程序員就受不鳥了怔锌，一個(gè)擁有三大美德的程序員 Isaac Z. Schlueter （以下簡稱 Isaaz）給出一個(gè)解決方案：用一個(gè)工具把這些代碼集中到一起來管理吧！
這個(gè)工具就是他用 JavaScript （運(yùn)行在 Node.js 上）寫的 npm变过，全稱是 Node Package Manager

NPM具體步驟

NPM 的思路大概是這樣的：
1.買個(gè)服務(wù)器作為代碼倉庫（registry）埃元，在里面放所有需要被共享的代碼
2.發(fā)郵件通知 jQuery、Bootstrap媚狰、Underscore 作者使用 npm publish 把代碼提交到 registry 上岛杀，分別取名 jquery、bootstrap 和 underscore（注意大小寫）
3.社區(qū)里的其他人如果想使用這些代碼崭孤，就把 jquery类嗤、bootstrap 和 underscore 寫到 package.json 里，然后運(yùn)行 npm install 辨宠，npm 就會幫他們下載代碼
4.下載完的代碼出現(xiàn)在 node_modules 目錄里遗锣，可以隨意使用了。
5.這些可以被使用的代碼被叫做「包」（package）彭羹，這就是 NPM 名字的由來：Node Package(包) Manager(管理器)黄伊。

NPM為什么能流行起來

npm 的發(fā)展是跟 Node.js 的發(fā)展相輔相成的。
Node.js 是由一個(gè)在德國工作的美國程序員 Ryan Dahl 寫的派殷。他寫了 Node.js还最，但是 Node.js 缺少一個(gè)包管理器墓阀，于是他和 npm 的作者一拍即合、抱團(tuán)取暖拓轻，最終 Node.js 內(nèi)置了 npm斯撮。
后來的事情大家都知道，Node.js 火了扶叉。
隨著 Node.js 的火爆勿锅，大家開始用 npm 來共享 JS 代碼了，于是 jQuery 作者也將 jQuery 發(fā)布到 npm 了枣氧。

全局安裝與本地安裝

npm 的包安裝分為本地安裝（local）溢十、全局安裝（global）兩種，從敲的命令行來看达吞，差別只是有沒有-g而已张弛，比如
npm install express # 本地安裝
npm install express -g # 全局安裝
本地安裝

將安裝包放在 ./node_modules 下（運(yùn)行 npm 命令時(shí)所在的目錄），如果沒有 node_modules 目錄酪劫，會在當(dāng)前執(zhí)行 npm 命令的目錄下生成 node_modules 目錄吞鸭。
可以通過 require() 來引入本地安裝的包。
全局安裝
將安裝包放在 /usr/local 下或者你 node 的安裝目錄覆糟。
可以直接在命令行里使用刻剥。

使用gulp構(gòu)建less代碼

創(chuàng)建文件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文件，執(zhí)行編譯命令

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

附A：NodeJs入門示例

hello.js

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

執(zhí)行: 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');

執(zhí)行: node helloserver.js

附B：CommonJS示例

CommonJS規(guī)范
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;

執(zhí)行node main.js