以下是在网上查到的对脚手架的各种解释:
1、脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具,就比如gulp是任务自动构建工具,gulp-cli则是以命令行的形式安装和操作gulp的工具
2、脚手架,那就离不开webpack glup 这样的构建工具。有了脚手架,就直接开始写业务逻辑,不用操心压缩文件,混淆代码,编译sass less stylus等这样的工作
3:
链接:https://www.zhihu.com/question/47731497/answer/147672677
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
首先,脚手架是什么?
个人觉得“脚手架”只是一个宽泛的概念,只是一个或者一套“搭建工具”的总称,这些工具能够帮助你更好的去完成前端代码构建。传统中我们写前端代码并不需要所谓的脚手架,一个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。
链接:https://www.zhihu.com/question/47731497/answer/107667684
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
一般来说,脚手架是帮你减少「为减少重复性工作而做的重复性工作」的工具.
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)成为不同项目的脚手架工具.