1. 首页
  2. IT资讯

这几款前端必备构建工具合辑,我们帮你整理好了

工欲善其事,必先利其器。想要在春招中过五关斩六将,前端基础知识掌握的不扎实可不行。今天就给大家盘点一下几款最热门的构建工具。

说到构建工具,我们往往会在前面加「自动化」三个字,因为构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的。之前小渡也和大家探讨学习过自动化构建工具,今天咱们主要来聊一聊按照工具类型对其的分类。

其实,构建工具,说白了就是帮助我们通过配置或者编写约定好的代码,来自动完成上面的这些功能的一个工具。对于需要反复重复的任务,例如压缩、编译、单元测试、linting等,自动化工具可以减轻我们的劳动,简化我们的工作。

这几款前端必备构建工具合辑,我们帮你整理好了

说到这里是不是有点懵?

其实简单来说,js、css、less、img等等都需要进行处理或编译后才能发布的,比如说压缩,合并,处理css浏览器前缀等等,而代码又需要维护,如果你不用自动构建工具,而是手动去做,也就是说你每改一次代码,就要压缩,合并等把一系列处理都做一次,才能用。学会自动构建工具,再加上各种配套的插件,可以自动完成各种复杂的处理。

其实啊,构建工具虽然最主要的功能是实现自动化处理,让我们日常工作更方便快捷以外,有的工具还提供模块化、组件化的开发流程功能。因此具体来说,按照工具的类型,我们可以把他们分为模块化打包类、任务流构建类和集合型工具类(脚手架)三种

这几款前端必备构建工具合辑,我们帮你整理好了

模块化打包类

有过Node.js开发经历的同学应该对模块很熟悉,需要引用组件直接一个 require 就OK,这类工具就是这个模式,还可以实现按需加载、异步加载模块。

常用工具包括Browserify、Webpack、rollup.js等。Browserify可以让你在浏览器端运行使用require加载的js代码,我们可以在控制台利用基于node环境中得npm命令进行安装,并将js文件编译成可以被浏览器识别得js语法

WebPack则可以看做是模块打包机

它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

这几款前端必备构建工具合辑,我们帮你整理好了

而Rollup是一个JavaScript模块打包工具,可以将小块代码编译成大块复杂的代码。开发者可以使用ES2015模块和TypeScript,最终打包成一个独立的可运行在浏览器或者Node.js环境的文件。

这几款前端必备构建工具合辑,我们帮你整理好了

任务流构建类

这是基于任务的构建行为,是不在乎操作对象是否为模块化的,也是小渡今天要介绍的重头戏。

这类工具的目标是通过配置来解放日常需要重复的工作——转化、合并压缩和单元测试等等。

有同学会有这样的疑问:这些操作Webpack和Rollup不是也能做吗,为什么还要用任务流呢?是的,的确这些操作webpack和rollup可以完成,但因任务流工具和模块化构建的出发点不同,任务流工具是十分纯粹的自动化行为,虽然在开发过程中很少用到,但多了解学习还是很必要的。

任务流构建工具常用的包括Grunt、Gulp两大工具。

Grunt

作为老牌构建工具,它是通过配置驱动——通过获取到的JSON配置执行操作,来流水线式执行相应任务。虽然在学习成本和执行效率上不出众,但它依然被许多知名项目如WordPress、Twitter和Jquery等使用,也拥有持续更新的完整生态圈和中文文档

这几款前端必备构建工具合辑,我们帮你整理好了

但同时特点也是缺点,Grunt缺点也是配置驱动,当任务非常多的情况下,试图用配置完成所有事简直就是个灾难;再就是它的I/O操作也是个弊病,它的每一次任务都需要从磁盘中读取文件,处理完后再写入到磁盘,这样一来当资源文件较多,任务较复杂的时候性能就是个问题了。

Gulp

作为一款新型的构建工具,虽与Grunt的功能相同,但其与Grunt相比,Gulp无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且Gulp使用的是nodejs中stream来读取和操作数据,其速度更快。

如果你还没有使用过前端构建工具,或者想找一款简易入门的工具的话,那就尝试一下Gulp吧。相比较于Grunt,Gulp拥有以下三大优势。

代码驱动易于使用

代码驱动即通过执行实际代码驱动程序执行,与常见的配置驱动不同(Webpack、Rollup和Grunt等都是配置驱动)。

从任务流构建的角度上看,代码驱动相比配置驱动有三点好处:一是高度的灵活;二是没有过多的配置项,减少学习成本;三是更方便错误的断定和异常情况的调试

Node流构建快速

Gulp作为后来者,充分利用NodeJS流的思想进行IO操作,极大增加了大型项目的构建速度。一步到位,无需多次的IO操作。

易于学习简介明了

Gulp有十分精简的API。你能想到各种类型的任务,基本是通过仅有的五个可链式操作的方法实现的吗?不仅仅是学习和使用方便,编写后的功能也是一目了然。通过最少的API,掌握Gulp毫不费力,构建工作尽在掌握。

这几款前端必备构建工具合辑,我们帮你整理好了

总的来说,Gulp是一款非常轻量级的工具,但是gulp使用者来说,并不是每个人都有非常强的处理错误能力,如果遇到插件bug(当然这种情况很少见),需要联系作者,这个是一件非常棘手的事情。但是这种风险是存在的。

那么我们该如何选择这两款工具呢?在做选型的时候,我们往往会考虑以下几个因素:是否符合团队的技术栈;是否符合项目需求;生态圈是否完善、社区是否活跃。排除前两点主观的因素,我们在这两款主流工具中看一下他们的比较分析。

从工作流来看,这两款工具都是基于任务类型,所以它们的工作流是一致的。可以看到它们打包的策略通常是Allin one,最后页面还是引用css、img、js,开发流程与徒手开发相比并无差异。

这几款前端必备构建工具合辑,我们帮你整理好了

从适用场景来看,通过上面的介绍可以看出它们侧重对整个过程的控制管理,实现简单、对架构无要求、不改变开发模式,所以非常适合前端、小型、需要快速启动的项目。因此,这两款工具也成了任务流构建工具中的热门选手

这几款前端必备构建工具合辑,我们帮你整理好了

集合型工具

集合型工具是使用了多种技术栈实现的脚手架工具,它可以用来快速的自动生成项目的必要文件和基础文件结构。脚手架工具的好处是即开即用,缺点就是它们约束了技术选型,并且学习成本相对较高

主流工具包括Yeoman、FIS、jdf、Athena、cooking、weflow等等。

Yeoman

它是一个通用的脚手架搭建系统,可以创建任何的类型的app。同时它又是”语言无感知”的,支持创建任何类型开发语言的项目,Web,Java, Python, C#等等。

Yeoman的通用性在于,它本身不做任何决定,所有的操作都是通过Yeoman环境里面的各种generator实现的。通过自定义generator,我们可以创建任何格式的项目目录。这是Yeoman的最大魅力之处。

这几款前端必备构建工具合辑,我们帮你整理好了

FIS

作为老牌前端构建化工具,FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构,这能帮助工程师提高开发效率,沟通协作效率,快速实现需求并达到代码的最优化。但是随着近几年源源不断的“新生代工具”逐渐占领前端市场,FIS似乎逐渐暂缓了突破的步伐以至于备受吐槽。

尽管不如前几年火热,但重要的是FIS的内在设计思想值得借鉴,在进行二次开发,或者准备自己开发一套属于自己团队编译工具,都有十分重要的借鉴意义。

这几款前端必备构建工具合辑,我们帮你整理好了

所以说,工具就只是工具而已,是你学会前端技能的一种手段方法。当你是觉得某个工具不是一个好的构建工具的时候,你完全可以基于它的思想开发一个啊,总之适合自己的才是最好的

本次给大家推荐一个免费的学习圈,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。对web开发技术感兴趣的同学,欢迎加qun:四八四七五七七六零,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天解答问题。

以上就是本次分享的前端构建化工具,各位同学get到了吗?

希望这些工具对大家有所帮助和启发,祝各位在春招都能成为offer收割机,新的一年前端技术棒棒的,薪资翻翻,一起在国内推动大前端的未来!

原文始发于:这几款前端必备构建工具合辑,我们帮你整理好了

主题测试文章,只做测试使用。发布者:IT资讯科技,转转请注明出处:http://www.cxybcw.com/17116.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code