前端開發中提到的「腳手架」到底指什麼，CLI？gulp 和 gulp-cli有什麼區別

01-15

一般來說，腳手架是幫你減少「為減少重複性工作而做的重複性工作」的工具.

gulp和gulp-cli的區別可以看這個task - what does gulp-"cli" stands for? . 它跟前端常說的腳手架（scaffold）不是一個東西. CLI只是Command Line Interface的縮寫.

====

舉個例子

你要寫一個項目0，源語言為ES6，用了sass, 後端是node. 你每次完成一部分功能，你都要用把ES6編譯到ES5、編譯sass、壓縮html文件.

每次修改代碼都要做的編譯ES6、sass、壓縮html這些就是重複性工作.

後來你知道了gulp, 然後你寫了個gulp腳本，每次有代碼改動，一句gulp build就幫你完成了上面說的這些重複性工作. 你寫的gulp腳本就是為減少重複性工作而做的工作.

你寫完這個項目0之後，你又要寫項目1，還是ES6、sass、後端node，還要完成之前的那些重複性工作. 這個時候你又為了這個項目寫了一個類似gulp腳本.

後來你又寫了項目2、項目3···，你每次都用相同的技術棧，每次的gulp腳本都大同小異，這時候你發現，寫這麼多gulp腳本也成了重複性工作. 這就是為減少重複性工作而做的重複性工作.

而腳手架就可以幫你減少這些為減少重複性工作而做的重複性工作. 腳手架一個命令，目錄結構、gulp腳本、babel配置、空的測試文件都幫你搞好了. 直接寫核心業務代碼，不做重複性工作，這就是腳手架的作用.

當然一般不同的技術技術棧會有自己的目錄結構、工作流程，所以很多前端框架比如vue、angular、 ember會有自己的腳手架工具（一般就叫XXX-cli）. yeoman也可以根據不同的生成器(generator)成為不同項目的腳手架工具.

首先，腳手架是什麼？

個人覺得「腳手架」只是一個寬泛的概念，只是一個或者一套「搭建工具」的總稱，這些工具能夠幫助你更好的去完成前端代碼構建。傳統中我們寫前端代碼並不需要所謂的腳手架，一個html加上css和js，你所需要的工具一個編輯器就夠了。

但是隨著web2.0的發展，頁面越來越豐富，尤其是一些大型的、頁面數據交互比較複雜的網站，為了優化前端工作，誕生了很多工具。比如讓你寫css更方便的less，比如當下流行的用將html模板直接用js來寫的React，以及實現js模塊化以及前端代碼打包的工具webpack。（這裡有部分總結：Mukti"s Tech Blog）。

gulp可以理解成一個綜合工具，可以通過插件將很多前端工具集合起來，快速的構建出來。（和gulp相提並論的還有grunt）。

現在比較流行的方法是基於node來搭建前端預編譯的環境，這個就區別於以前直接在瀏覽器中直接以引入js文件的形式引入一個工具插件（比如sea.js，require.js，甚至jquery.js）。

在node中，我們使用一個叫做npm的工具，用來安裝、管理我們前端工作需要用到的包（package），這時候，「cli」就好理解了，cli其實就是「command line interface 命令行界面」，一般就是指npm中的插件（你可以理解成windows中的exe這個概念）。

搭建gulp的運行環境我們需要在node中安裝gulp包：

1.全局安裝：npm install --global gulp

2.在你的項目開發目錄安裝：npm install --save-dev gulp

完成這兩步你才能在你目前的項目中使用gulp。

那麼，gulp-cli又是個什麼鬼呢？其實，gulp-cli也是gulp推出的一個npm包，為了和gulp包做區別，加了cli，只是一個名稱而已（如果gulp的開發人員樂意，也可以叫gulp-hahaha）。兩者的區別在於，如果你在全局安裝中使用命令：

npm install --global gulp-cli

那麼你就可以在你的多個項目開發目錄中使用不同版本的gulp。

一句話，你全局安裝gulp-cli之後可以在不同的項目中使用不同的gulp版本。

腳手架是指通過輸入簡單指令幫助你快速搭建好一個基本環境的工具，就比如gulp是任務自動構建工具，gulp-cli則是以命令行的形式安裝和操作gulp的工具

腳手架，那就離不開webpack glup 這樣的構建工具。有了腳手架，就直接開始寫業務邏輯，不用操心壓縮文件，混淆代碼，編譯sass less stylus等這樣的工作