前端开发中提到的“脚手架”到底指什么,CLI?gulp 和 gulp-cli有什么区别
一般来说,脚手架是帮你减少「为减少重复性工作而做的重复性工作」的工具.
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)成为不同项目的脚手架工具.
作者:flowmemo
链接:https://www.zhihu.com/questio...
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文地址:https://segmentfault.com/a/1190000016670356
前端开发中提到的“脚手架”到底指什么,CLI?gulp 和 gulp-cli有什么区别的更多相关文章
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- 【转】分享前端开发中通过js设置/获取cookie的一组方法
在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...
- Web前端开发中的MCRV模式(转)
作者: izujian 来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...
- 前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- px em rem在WEB前端开发中的区别
我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- WEB前端开发中的图片压缩
web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...
- 前端开发中的JS调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
随机推荐
- solr IK分词器
1.把IK文件夹上传到服务器tmp文件夹 2.把需要的jar导入到solr项目中 # cp IKAnalyzer2012FF_u1.jar /usr/local/solr/tomcat/webapps ...
- [題解]luogu_P1854 花店櫥窗佈置
來源:題解 一開始看不懂題目,一萬年了終於看懂 f [ i ] [ j ] 表示第i朵花放在第j個花瓶中最大美學值,(花是必須用完嗎?) 顯然放i-1朵花至少要放到前i-1個瓶子里,最多放到前j-1個 ...
- GYM 101889F(树状数组)
bit扫描坐标套路题,注意有重复的点,莽WA了. const int maxn = 1e5 + 5; struct node { ll B, F, D; bool operator < (con ...
- StretchDIBits速度测试(HALFTONE)
StretchDIBits速度测试(HALFTONE) 下面实验中显示窗口大小为1024*768,拉伸模式设为HALFTONE. 一.单通道图像 (1) 保持图像高度为1024,宽度从24到2024递 ...
- CSS div和css布局
一.div和span DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 DIV和span的区别在于,span是内联元素,div是块级元素.div占用整行,span只 ...
- 18113 Secret Book of Kungfu 按位DFS
http://acm.scau.edu.cn:8000/uoj/mainMenu.html 18113 Secret Book of Kungfu 该题有题解 时间限制:1000MS 内存限制:65 ...
- [转]Formatting the detail section to display multiple columns (水晶报表 rpt 一页多列)
本文转自:http://www.bofocus.com/formatting-the-detail-section-to-display-multiple-columns/ Format the de ...
- jQuery选择器手册
jQuery选择器手册 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的 ...
- js图片预加载以及延迟加载
当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...
- Android镜像文件ramdisk.img,system.img,userdata.img介绍
Android 源码编译后,在out目录下生成的三个镜像文件:ramdisk.img,system.img,userdata.img以及它们对应的目录树root,system,data. ramdis ...