3.前端脚手架

一般来说，脚手架是帮你减少「为减少重复性工作而做的重复性工作」的工具.

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)成为不同项目的脚手架工具.

---

 

这个就是一个比喻，比喻项目开发的前期工作。每次开始一个项目，你得先把整个文件目录结构搭好把，把必要的文件先建好。这个过程每次新建项目都需要，其实这个就是脚手架 该干的活。再说明白点，这个脚手架就是个项目模板，有了他能给我省很多事。就像在后台创建Maven项目时，可以直接Create from archetype

这个 archetype就是个原型或者说是模板，跟这个脚手架差不多。推荐个阿里的前端脚手架：https://ng-alain.github.io/ng-alain/#/dashboard/v1

 

---

开篇

第一次听说脚手架， 是我刚接触Vue，跟着网上大佬的文章，用Vue-cli从0搭建了一个Vue项目，一步一步配置,然后npm i, npm run dev，打开链接,一个网页就这么写好了，当时对于npm，webpack这些前端工程化一无所知，嘴里不自觉的吐出了两个字：'NB'。一年以后，一位新猿在Segmentfault上发出了这样的提问：

然后我就装着知道的样子就去回答了一下，答案是这样的：