前端自動化準備和詳細配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)

一. 各種概念和指令介紹

 1. NVM

(1).  全稱：Node Version Manager，是一款針對Nodejs的版本管理工具，因爲Node的版本不少，不少時候我要須要依賴多個版本，而且要求能夠自動切換，這個時候採用NVM來管理Node再合適不過了。

(2). 下載地址：https://github.com/coreybutler/nvm-windows/releases

(3). 經常使用指令：

　　a. 查看已經安裝的node版本：    【nvm list】

　　b. 更換當前node的版本：          【nvm  use 版本號 】

　　c.  安裝指定版本的node：          【nvm  install 版本號 】      （nvm install stable   特指安裝最新最穩的node版本      nvm install latest  特指下載最新的node版本）

　　d.  刪除指定版本的node：         【nvm  uninstall 版本號】

　　其它指令：

 (4). NVM自身版本如何更新：

　    NVM總共就5個文件，直接複製到原文件夾下，覆蓋便可。

 

 2. Node.JS

　　(1). 一個JS的運行環境

　　(2). 主要用於開發Web應用程序

　　(3). 不少的前端開發工具都是基於node這個平臺

　　(4). 所用的工具就至關於一些軟件

　　PS：

　　　　Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境，Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

　　　　Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

　　　　Node.js的版本管理器爲nvm。

3. NPM

　　NPM（node package manager），是Node.js的包管理器，是全球最大的開源生態庫。

　　參考地址：  官方網站：https://www.npmjs.com/

                           淘寶鏡像：https://npm.taobao.org/

       npm管理包很是方便，咱們只須要記住使用哪一個包就能夠了，相似於.Net平臺下的Nuget。

 4. CNPM

　　cnpm工具，它是中國版的npm鏡像庫，地址在這裏：https://cnpmjs.org/，也是npm官方的一個拷貝，由於咱們和外界有一堵牆隔着，因此用這個國內的比較快，淘寶也弄了一個和npm同樣的鏡像庫，http://npm.taobao.org/，它和官方的npm每隔10分鐘同步一次。安裝方式：

　　指令：【npm install -g cnpm --registry=https://registry.npm.taobao.org】

　　安裝好了cnpm後，直接執行：cnpm install 包名

　　好比：cnpm install bower -g 就能夠了。-g只是爲了把包安裝在全局路徑下。若是不全局安裝，也能夠在當前目錄中安裝，不用-g就能夠了。

注意：cnpm的下載路徑按照上述指令安裝的話，默認就是從taobao的地址下載，和經過nrm切換npm的下載源到taobao，此時npm和cnpm的下載源是相同的，下載速度也是一致的。

5. NRM

　　nrm就是npm registry manager 也就是npm的鏡像源管理工具，有時候國外資源太慢，那麼咱們能夠用這個來切換下載的鏡像源。 

       咱們只要經過這個命令: 【npm install -g nrm 】就能夠實現安裝。 

       注意：-g能夠直接放到install的後面，咱們之後也最好這樣用，由於這樣用，咱們能夠在cmd中上下箭頭切換最近命令的時候，容易修改，更方便操做。安裝完成後，咱們就可使用了。

　　命令：【nrm ls 】用於展現全部可切換的鏡像地址

　　命令：【nrm use taobao】 咱們這樣就能夠直接切換到taobao上了，和上述的cnpm就一致了。固然也能夠按照上面羅列的其餘內容進行切換。

6. WebPack

　　WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

　　Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

7. Gulp/Grunt

　　Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。

8. Git/SVN

　　代碼、文件等版本管理工具。

二. 安裝步驟(兩套安裝方案)

 方案一：嚴格按照順序進行安裝配置 

(一). 安裝NVM的詳細步驟

   (1). 在C盤目錄下建一個Develop文件夾，該文件用來存放各類與開發相關的配置。

  (2). 在Develop文件夾中新建nvm文件夾，並將下載的nvm五個文件拷貝進去。

   下載地址：https://github.com/coreybutler/nvm-windows/releases  

   注意：下載免安裝版本的，不要下載exe安裝程序。

 

(3). cmd命令測試是否安裝成功。

 輸入指令：【nvm -v 】，  發現並不能用。緣由是尚未配置環境變量。

 

(4).  配置環境變量

    NVM_HOME=C:\Develop\nvm

    PATH=%NVM_HOME%;

    如圖所示：

而後經過命令測試：

 發現：並無成功，緣由是 nvm 的根目錄下缺乏一個 配置文件setting.txt。

(5). 動態生成配置文件

（有現成的能夠直接拷貝進去，這裏介紹一種動態生成的方式）。

  雙擊：install.cmd命令，而後把當前路徑拷貝進去，點擊回車，會自動在當前目錄下生成 setting.txt文件。

從新cmd 輸入指令【nvm -v】,發現大功告成。

 

下面咱們測試一下nodejs環境，指令【nvm list】，發現並無安裝。

 

(二). 安裝Node.js

(1). 直接輸入指令【nvm install latest】，安裝最新版本的node。 

特別注意：備註： 若是你的電腦系統是32 位的，那麼在下載nodejs版本的時候，必定要指明 32 如：【nvm install 5.11.0 32 】 這樣在32位的電腦系統中，纔可使用，默認是64位的。

　　這個時候發現一個現象，下載完最新的nodejs版後，自動去下載最新的npm了，這個現象很正常，在每一個版本的nodejs中，都會自帶npm，爲了統一塊兒見，咱們安裝一個全局的npm工具，這個操做頗有必要，由於咱們須要安裝一些全局的其餘包，不會由於切換node版本形成原來下載過的包不可用。

　　爲了後面演示切換方便，咱們這裏再安裝另一個node的版本 指令【node install 6.2.0】。

 　  一樣的現象，安裝完node後，會自動下載該版本的node對應npm包。

 (2). 配置node的環境變量

【這裏先補充一個知識點：nvm切換node版本的原理，會在nvm的同級目錄下生成一個nodejs的快捷方式，當前使用哪一個版本的node，該快捷方式就會執行nvm文件夾裏的對應版本的node】

   基於以上原理，配置nodejs環境變量的時候，指向的是該快捷方式，這樣不管怎麼切換node版本，環境變量都不須要改，均可以直接對應。

 A：配置NVM文件夾下的setting.txt配置文件。

B：配置系統環境變量。

　　NVM_SYMLINK=C:\Develop\nodejs

　　PATH=%NVM_SYMLINK%;

 

 

(3) . 查看已經安裝的node版本，並選擇指定版原本使用。

　　查看已經安裝的node版本，指令【node list】

　　選擇8.5.0版本進行使用，指令 【node use 8.5.0】

 　 再輸入該命令以前，觀察一個現象，Develop目錄下只有nvm一個文件夾。

     執行該命令。

 

 　發現Develop目錄下多了一個nodejs的快捷方式【正是經過該快捷方式來映射nvm文件夾裏對應的node版本，同時node的環境變量也是對應該快捷方式】

　 再次查看使用版本【nvm list】，發現8.5.0正在使用中

(三).  設置npm全局的下載路徑，而且安裝全局的

 　咱們在前面提到，每安裝一個node版本，都會安裝與其對應的npm包，在這裏咱們切換node版本，而後查看對應的npm版原本測試一下。

　既然咱們已經裝了多個不一樣版本的npm了（每一個版本的node對應一個版本的npm），那麼咱們爲何還要安裝一個全局的npm包呢？

   【首先咱們先補充一個知識：經過npm下載下來的其餘程序包都是存放在" node_modules "文件夾下，而每一個node下的npm都對應一個" node_modules "文件夾，但咱們再實際開發中，一般須要下載一些程序包，這些程序包要是全局的，不能由於切換node版本而致使該程序包不可用】

　因此咱們下面的思路藉助已有的npm，來下載安裝一個全局的npm。

 (1). 配置NPM的全局安裝路徑

　進入cmd命令，輸入【 npm config set prefix "C:\Develop\npm" 】回車，這是在配置npm的全局安裝路徑，而後在用戶文件夾下會生成一個.npmrc的文件，用記事本打開後能夠看到以下內容：

 

用記事本打開：並新增全局npm緩存的配置路徑，以下圖。

(2). 經過命令【npm install  -g npm】，下載全局的npm包   (下載不下來，先放到後面)

 

 

(3) . 配置npm的環境變量

NPM_Home=C:\Develop\npm

PATH=%NPM_Home%;

 

 (4). 安裝nrm 

經過命令： 【npm install -g nrm】全局安裝nrm

【nrm ls】，展現全部鏡像的地址。

切換npm的下載源頭。    【nrm use taobao】

 

從新全局安裝npm， 【npm install -g npm】

 

特別注意：在這裏下載完後，不管node版本怎麼切換，npm的版本始終是全局的npm的 ： 5.4.2版本 

 

特別注意：經過nrm的指令  【nrm use taobao】，將npm的下載源頭切換到taobao，此時實際上和下面要安裝cnpm下載是一個道理的，說白了，切換後的npm，就沒有必要安裝cnpm了。

　這裏再補充一種方式，來切換npm的下載路徑（能夠不用安裝nrm）

【 npm config set registry https://registry.npm.taobao.org】，該指令與前面「配置npm的全局安裝路徑相似」，都是操控的 .npmrc文件。

 

（四）全局安裝cnpm

指令【npm install -g cnpm --registry=https://registry.npm.taoba0.org】

 

查看安裝是否成功【cnpm -v】

 

 

方案二. 直接官網下載NodeJS安裝包，簡單粗暴型

 1. 官網下載Node.js的msi安裝包，直接下一步安裝。

　　下載地址：http://nodejs.cn/

　　安裝過程很是簡單，直接下一步、下一步、一路到底。

　　建議：安裝路徑根據本身的須要適當改一下。

　　特別注意：選擇安裝項的這一步，要不npm和add path(自動配置環境變量)，這兩個選項給勾上。

 　　

2. 校驗安裝成果。

 　　A： 發現nodejs和npm能夠正常使用

　　　　

　   B： 發如今用戶變量和系統變量的path中各自多了一條記錄。

　　

 

 

　　C： 測試全局下載【npm install -g bootstarp】。將下載到該路徑下：C:\Users\Administrator\AppData\Roaming\npm\node_modules

 

3. 該種安裝方式總結。

　　不利於nodejs的版本管理，沒法自動切換或更新nodejs的版本。

　　全局下載路徑須要本身從新配置，默認的路徑，有點坑爹，很差找。

　　默認是沒有安裝nrm或cnpm的，須要本身從新切換下載源，默認是國外的。

 

最後建議： 生命在於折騰，建議採用方案一的方式進行配置，對每一步的做用作到心中有數。

 

三. npm或cnpm使用

 這裏以cnpm的指令來介紹，npm的使用只需將指令中的cnpm改成npm便可。【手動將npm的下載源切換到taobao，實際上和cnpm同樣了】

　　1. 將npm更新到最新版本：  【npm install -g npm】

　　2. 將cnpm更新到最新版本：【cnpm install -g cnpm】

　　3. 安裝其它程序包：     【cnpm install xxx】    會在當前路徑上生成一個"node-modules"，並將xx程序下載到該文件夾下。

　　eg ： 新建一個文件夾，在該文件夾下打開cmd命令，輸入指令：  【cnpm install  bootstrap 】

　刪除其它程序包：   【cnpm uninstall xxx】

　　4. 安裝其它程序到全局npm路徑下： 【cnpm install -g xx】

　　　刪除其它全局程序包：【cnpm uninstall -g xx】

　　5. 補充知識點：項目依賴

　　A: 普通項目依賴：

　　　　【npm init】：生成一個package.json文件，用來記錄項目須要依賴哪些東西。

　　【npm install xx --save】：對應的是 package.json 文件 dependencies，該節點表示發佈以後還須要依賴的東西。（eg：JQuery，發佈以後，仍然須要依賴JQuery庫）

　　【npm install xx --save-dev】：對應的是package.json 文件 devDependencies，該節點表示開發階段須要依賴的東西。（eg：grunt、bable相似的工具類 ，只在開發階段使用）

 

                【npm install】：默認還原的是package.json下dependencies和devDependencies兩個節點下的全部依賴庫。

        B：全局依賴：特指你要安裝一個工具包，系統中任何位置均可能用到，這種狀況下一版要全局安裝。

         指令：【cnpm install -g xx】

6.  全局npm版本更新

 　【npm install -g npm】，時間有點長，大約須要兩分鐘

 

四. 使用以上配置包，快速配置

　　看了上面的方案一的配置步驟，雖然步驟比較詳細，可是受網速等一系列因素，對應一個新手而已，沒有一兩個小時，是很難配置成功的。 

　　方案二簡單粗暴的安裝，不便於多版本的控制，不靈活。

　　因此這裏我將提供我我的的已經下載配置好的程序包供廣大網友使用，只需配置環境變量便可，省去了煩人的下載步驟。

　　下載地址：http://pan.baidu.com/s/1o8uUMgU   

　　壓縮文件中包括：【Develop文件夾】  【.nmprc文件】

　　Develop包括：【nvm 1.1.6】、【nodejs 8.5.0】、【nodejs 6.2.0】、【全局的npm  5.4.2】、【全局的nrm】、【全局的cnpm】

　　注意：這裏的.npmrc裏已經默認把npm的下載源頭切換到了國內的taobao了，同cnpm同樣了。

快速配置步驟：

　　(1). 解壓壓縮包：將Develop文件夾移動到C盤的根目錄，將.nmprc移動到C盤→用戶→Administrator(也多是其餘用戶名)。

        (2). 配置環境變量

　　　　NVM_HOME=C:\Develop\nvm

　　　　NVM_SYMLINK=C:\Develop\nodejs

　　　　NPM_HOME=C:\Develop\npm          

　　　　PATH=%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%

        注意：在配置path的時候，先後注意要有分號。

　 (3). 經過指令測試是否成功。（前先後後，分鐘足以搞定）

 

 

 

PS： 後臺技術系列

定時調度系列之Quartz.Net詳解

那些年咱們一塊兒追逐的多線程(Thread、ThreadPool、委託異步調用、Task/TaskFactory、Parallerl、async和await)

ASP.NET MVC深刻淺出系列(持續更新)

ORM系列之Entity FrameWork詳解（持續更新）

DotNet進階系列(持續更新)

 

 

!

• 做       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 本人才疏學淺，用郭德綱的話說「我是一個小學生」，若有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文連接或在文章開頭加上本人博客地址，如需代碼請留下你的評論，加我QQ：604649488 （備註：評論的博客名）