躺下來聊聊前端自動化—node.js、npm、webpack、gulp這些鬼

02-11

每次在文章前面總想bb叨些廢話。從3月入門到如今仰頭圓月的8月半，5個半月就決定了我未來幾年的職業方向甚至說是未來幾年的生活重心，選擇和遇見真是個奇妙的事情，就像原本不合時宜的胃疼和恰如其分而來的草莓味奧利奧……

在學習前端的前兩個半月，按部就班的html、css、js、jq，恩，頁面很好看了。然而一個周末的vue課程，當超哥帶我們敲下cmd打開這個小小的黑框子時世界就不一樣了，哦，當時並沒有被node.js這項偉大的發明折服，而是在接下的時間內被不斷地折磨，包括初入公司打開terminal配置的那一堆php亂七八糟的東西，這tm什麼鬼，我們好好打開atom敲個html頁面配個css，js文件不就好了嗎？ok、ok，我用……直到一次在公司做項目調介面一直報錯，還是php的錯，拖了很久，結果是我重啟電腦沒有kill掉php5.6版本的原因。你在工作的時候就不再是學生了，不會就是你的錯，可能你確實是不知道，但你總不能拿」也沒人告訴我啊「這種理由過一輩子。所以，環境的搭建及使用，這些node.js、npm、webpack、gulp是什麼鬼，就自己來學習一下吧。

文化的輸出總會包含著個體自我的主觀認知，下面的內容，基於我目前知識的局限性，無法保證純粹的準確性，就簡單講一講我的理解：

一、什麼是前端自動化，前端自動化能幹什麼？

你是敲代碼的沒錯，你是一名開發人員，你的工作是創造而不是重複，那就節省出這些時間來進入前端自動化的時代：

1.自動編譯（將less，sass等自動編譯）

2.自動合併（將頁面引入的多個js文件，或者css文件，合併為同一個且壓縮）

3.自動刷新（IDE保存，瀏覽器不用刷新，自動看到效果）

4.自動部署（自動將項目打包部署到指定目錄）

5.自動同步（能夠方便實現多個瀏覽器窗口，同步點擊，輸入，調試）

既然前端自動化這麼好，那就從開始吧。

下面以環境搭建=>工具搭建=>項目架構搭建來把這些鬼簡單介紹一下：

二、環境搭建 Node.js與npm

1.Node.js環境搭建：

Node.js是一個基於Chrome V8引擎的javascript的運行環境，其特點是單線程、事件驅動，非阻塞I/O模型，非常輕便高效，其包管理工具npm，是全球最大的開源庫生態系統。

2.Node.js是做什麼的呢：

本來瀏覽器在顯示我們看到的網站的時候，會做很多事情，頁面渲染，js渲染等等，然後node把其中js渲染的引擎拿出來，並且使用了谷歌的V8，然後在其外面又封裝了一層api，讓其擁有了文件讀寫，網路等操作，提供了一個服務端的運行環境，但卻是運行的javascipt。所以說node.js給前端開發行業帶來了一場工業革命。

3.NPM是什麼：

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

允許用戶從NPM伺服器下載別人編寫的第三方包到本地使用。
允許用戶從NPM伺服器下載並安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM伺服器供別人使用。

4.Node.js與npm的安裝：

打開node.js官網去下載吧~安裝好的node會自帶npm。

打開命令提示符，執行下面兩句，看一下版本號就可以了：

node -v // 查看當前node版本npm -v // 查看當前npm版本

5.npm怎麼用呢

使用npm安裝插件：命令提示符執行

npm install <name> [-g] [--save-dev]

5.1 <name>：node插件名稱。例：npm install gulp-less --save-dev

5.2、-g：全局安裝。將會安裝在C:UsersAdministratorAppDataRoaming
pm，並且寫入系統環境變數；非全局安裝：將會安裝在當前定位目錄；全局安裝可以通過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過require()調用；

5.3、--save：將保存配置信息至package.json（package.json是node.js的項目配置文件，在初始化文件 npm install 時會根據你配置文件中的條目進行安裝）；

5.4、-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；一般保存在dependencies的像這些express/ejs/body-parser等等。

5.5、使用npm卸載插件：

npm uninstall <name> [-g] [--save-dev]

5.6、使用npm更新插件：

npm update <name> [-g] [--save-dev] npm update [--save-dev] // 更新全部插件

5.7、查看npm幫助：npm help

5.8、當前目錄已安裝插件：npm lis

6.選裝 cnpm

npm很慢，那來cnpm吧，果然萬能的淘寶，哈哈

npm install cnpm -g --registry=https://registry.npm.taobao.org

安裝好後看下版本號就可以直接用啦，用法和npm一致，就是npm換成cnpm就好了~

三、工具搭建 Gulp、Grunt、webpack、browserify

node和npm明白是幹什麼的了，搭建環境嗎，那可以直接開敲代碼了嗎？no，no，no，你還需要搭建工具：

1.Gulp / Grunt 簡化前端流程

Gulp / Grunt 是工具鏈、構建工具，它們能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。使用Gulp/Grunt，然後配置你需要的插件，就可以替代手工實現自動化工作。

2.browserify / webpack JS模塊化方案

browserify / webpack : 是文件打包工具，可以把項目的各種js文、css文件等打包合併成一個或多個文件，主要用於模塊化方案，預編譯模塊的方案。因為它是預編譯的，所以不需要在瀏覽器中載入解釋器。你可在本地直接寫JS，不管是 AMD / CMD / ES6 風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。

目前我只接觸過gulp+webpack的項目，所以就這兩個工具下載安裝一下吧：

3.gulp與webpack的安裝

安裝gulp

npm install gulp -g // 全局安裝gulpgulp -v // 出現版本號即為正確安裝

安裝webpack

npm install webpack -g // 全局安裝webpackwebpack -v // 出現版本號即為正確安裝

全局安裝過後，仍需在項目根目錄進行本地安裝，全局安裝gulp是為了執行gulp任務，本地安裝gulp則是為了調用gulp插件的功能。

四、項目架構搭建

1.package.json

還記得上面說過的package.json嘛？package.json是基於node.js項目必不可少的配置文件，它是存放在項目根目錄的普通json文件。

可以通過 npm init 來新建一個package.json文件

由於本文不是一篇實用性項目構建的流程文章，就不具體展開package.json的寫入及配置流程了，我的第一篇blog裡面有基於vue-cli的構建，可以參考。這篇文章就是想通過大體的構建過程來弄清楚各部分的功能。

2.直接使用腳手架

腳手架是什麼：stackoverflow上的一個回答是這樣的

「腳手架」是一種元編程的方法，用於構建基於資料庫的應用。許多MVC框架都有運用這種思想。程序員編寫一份specification（規格說明書），來描述怎樣去使用資料庫；而由（腳手架的）編譯器來根據這份specification生成相應的代碼，進行增、刪、改、查資料庫的操作。我們把這種模式稱為"腳手架"，在腳手架上面去更高效的建造出強大的應用！

我的理解呢，腳手架就是給你的項目先打個架子，寫個框子，然後你按著寫入的方式去一點點填充滿你的程序。

安裝vue腳手架

npm install vue-cli

根據webpack創建項目

vue init webpack 項目名字<項目名不能用中文>

react的腳手架則是 create-react-app 等，有很多模版可以自己選擇，這樣就避免了自己構建那麼多複雜的流程。

五、總結一下

搭建環境：node.js 等

搭建工具： Gulp、Grunt、webpack、browserify 等

框架：React、vue、Angular等

庫：jQuery、Prototype等

插件：太多了……

寫到這也差不多了，要不然越寫越偏，馬上就開始建項目了這是……不知道看完這篇文章你明白node，npm這些都是做什麼的了嗎，其實…… 會用就行了（捂臉）。前端自動化算是前段工程化的開端，然而還有模塊化、組件化、規範化等等一系列，路漫漫而修遠，腳踏實地慢慢走吧~可能過一陣就會自己練習一個react的項目，到時候會記錄下來，然後做一個從頭到尾的項目流程。