###                                                      Node.Js入門教程    

---

> 簡單的說 Node.js 就是執行在服務端的 JavaScript，起初段定位是後端開發語言，由於技術的不夠成熟，一般小型專案會完全使用node.js作為後臺支撐，大專案中，執行不夠穩定，不會輕易使用。具有高併發優良特性，Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，效能非常好。

> node.js 現在今可以替換很多小型的php專案 ，但是雖然定位為後端語言，但常用於前後端但中介軟體，例如用於搭建前端伺服器，用於替換代理請求等，前端工程化的工具環境等使用。

我們作為前端，需要掌握什麼東西？

掌握node.js基本使用，前期不是為了開發後端，主要能夠掌握其常規語法，和基礎的內建的功能，能夠滿足一個前端對於前端工具的使用。（不懂語法規範，那麼就沒有辦法去使用前端自動化各種工具）

---

瀏覽器中的javascript：主要是window視窗中都一些基於事件、DOM操作等功能

後端中NodeJS：不存在window物件與DOM操作，視窗事件

共同特性：都遵循著ECMAScript都標準語法規範

node中沒有window物件，它有一個自己的全域性物件：global

## #

主要模組：

​    1.fs  檔案操作

​        目錄的建立與刪除

​        檔案的讀取寫入

​        重新命名...        

​    2.http ，http服務 ，建立伺服器

​        response 響應

​        request 請求

​    3.global 全域性物件（類似於window物件）

​    4.module（commonJS模組開發工具）

阮一峰node簡化教程 ：http://javascript.ruanyifeng.com/nodejs/fs.html    

可以使用Express 框架快速搭建一個後臺伺服器

---

npm (node package manage) 簡單的說就說nodejs 包管理工具。集成於nodejs的安裝包上

install : 安裝用於npm包管理工具安裝包使用命令

如果一個基於node 環境的專案，都會具有一個package.json的專案配置檔案 （包含了專案的基本資訊：專案的名稱、描述 、版本號、作者、依賴第三方的包，與配置）

package.json 好處可以實現專案的快速移植 ，使用 【npm install】  可以快速進行專案依賴的安裝

建立專案的package.json （初始化專案）:

~~~
npm init   然後後面直接按照提示按  y / n   ， 注意： -y 表示一切預設
~~~

安裝專案依賴包:

~~~
npm install express     注意: --save  將安裝記錄寫入到package.json的專案依賴中
~~~

解除安裝依賴包：

~~~
npm uninstall express 
~~~

更新依賴包：

~~~
npm update express
~~~

搜尋依賴包：

~~~
npm search express
~~~

---

#### 前端工程化

​    通俗：“什麼叫工程化，大概就是能有個方法，讓一大堆人，有組織有紀律地一起幹活，目的是提高效率，保證質量。 ”

提高效率：使用【前端自動化工具】，完成專案端各項處理工作（less編譯，css壓縮，補充字首，js壓縮，合併，雪碧圖生成...等等靜態資源端處理)

###### 1.專案包管理工具

​    1) npm( node package mananger)  nodejs 自帶node包管理工具

​    2）bower  前端各類外掛庫管理工具 （第三方的，使用時，需要先安裝bower）

##### 2.專案構建工具

​    1)gulp：（推薦）基於任務的專案構建工具，可以實現：搭建前端伺服器，專案靜態資原始檔的處理（js,css,圖片等） ，使用簡單，上手簡單（中小型專案）

​    2)grunt：出於gulp之前，使用簡易，與gulp相似

​    3).Browserify 專案的模組打包工具，功能也可以實現對靜態資源的處理，及打包。（逐漸淘汰的玩意）

​    4).webpack:(熱門+主流)  具有所有gulp的功能+ 模組管理 ，打包  ，學習有難度，一般的中大型專案，比較依賴

​    5)rollup.js （打包工具）

​    現在主流的前端框架： vue 、 React 、Angular 理想的開發環境，都是基於webpack的。

​    

---

#####                                                 Gulp使用

中文官網手冊：https://www.gulpjs.com.cn/

1.安裝(全域性安裝 + 專案目錄安裝)

~~~
npm install gulp -g    （全域性安裝）
~~~

2.專案依賴安裝

~~~
npm install gulp --save-dev    （安裝到專案檔案目錄）
~~~

3.在專案根目錄下建立一個gulpfile.js 檔案（所有gulp任務的清單檔案）

4.需要配置任務（gulpfile.js檔案中新增）

~~~
const gulp = require("gulp");//引入gulp

//建立任務 , 配置一個編譯less檔案的任務
    gulp.task("Test",function(){
    console.log("Test任務執行中....");
  })
~~~

5.安裝各種需要使用的外掛 ( 此處以 gulp-less為例)

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

6.使用工具實現任務

~~~
//gulp 工具預設執行任務的清單檔案
const gulp = require("gulp");//引入gulp
const less = require("gulp-less");//引入gulp-less外掛

//建立任務 , 配置一個編譯less檔案的任務

gulp.task("less",function(){
    //先通過src()方法 匹配到需要執行處理的檔案
    gulp.src("./src/style/**/*.less")
    .pipe(less())
    .pipe(gulp.dest("./dist/css/"));
})
~~~

7.執行任務

~~~
gulp 任務名稱    （如果不加名稱，則執行task 中名字為default 的任務）
~~~