新闻资讯

    web技术的发展在这几年突飞猛进,各种前端框架/库层出不穷,在给予前端开发人员便利的同时,也使前端开发流程变得复杂了起来。以前我们的开发流程是这样子的,拿到设计稿,切图,开始写页面,刷新浏览器,写页面,刷新浏览器……写入js、与后端联调,发布生产前压缩资源文件。不难看出,这是一种低效的工作模式,大多的时间花在了写页面,在浏览器中查看效果上。我们接触的主要文件也仅是html、css、js、图片等。

    简单的背后,意味着许多工作都是我们手动去做的。比如开发时频繁的刷新浏览器;代码审查需要人工去审查;发布前的静态文件压缩,需要寻找相应的压缩工具去压缩等,还有很多细枝末节的工作,统统需要我们手动去做。

    自从步入大前端时代后,我们的开发流程是这样子的,拿到设计稿,切图,开始写页面,查看浏览器,写页面,查看浏览器……写入js、与后端联调,发布生产前使用构建工具构建资源和模板。我们接触的文件也多了许多,不光有html、css、js、图片,多了sass、less、es6、es7等。

    前端自动部署工具_wed前端是什么意思_前端自动化是什么意思

    上边的前端自动化构建工具的出现,正是为了提高团队的开发效率前端自动化是什么意思,降低项目的维护难度,将简单重复的工作从开发者的手中释放出来。构建的工作主要包括两方面前端自动化是什么意思,一是静态资源的构建,包括js、css、图片等;二是模板的构建,就是html文件,在很多语言中会使用一些模板语言。两者的关系是引用和被引用的关系,模板对静态资源是引用关系。

    一、静态资源的构建

    1、预编译。静态资源包括js、css、图片等文件,目前随着一些新规范和css预编译器的普及,通常开发阶段的静态资源是:es6/7规范的文件;less/sass等文件;独立的小图标等。使用构建工具在处理这些静态文件时,会做如下处理:es6/7转译成es5;将less/sass编译成css;图片生成。

    前端自动化是什么意思_wed前端是什么意思_前端自动部署工具

    2、依赖打包。大前端时代,使用npm会下载很多包,中包的数量,轻则上千,重则上万,各个包之间的关系纠缠交错。而构建过程中的依赖打包,就是为了理清文件之间的依赖关系,将同步依赖的文件打包在一起,减少http请求数量。

    3、嵌入资源。嵌入资源即内容嵌入,可以将图片转成嵌入到css、js里,前端模板编译到js文件中,将js、css、html拆分成几个文件最后合并到一起。嵌入资源可以有效的减少http请求数,提升工程的可维护性。

    4、文件压缩。减小文件体积,可以有效节省带宽。

    5、hash指纹。通过给文件名加入hash指纹,以应对浏览器缓存引起的静态资源更新问题,是前端静态资源实现增量更新的方案之一。

    wed前端是什么意思_前端自动化是什么意思_前端自动部署工具

    6、代码审查。能够按照编码规范找到代码中的语法错误,避免上线文件的低级错误。

    二、模板构建

    1、url改变。开发环境与线上环境的url肯定是不同的,不同类型的资源甚至根据项目的CDN策略放在不同的服务器上。

    2、文件名改变。静态资源经过构建之后,文件名被加上hash指纹,内容的改动导致hash指纹的改变。

    wed前端是什么意思_前端自动化是什么意思_前端自动部署工具

    模板构建应该是在静态资源URL或者文件名改变后,需要同步更新模板中对资源的引用。

    综上,前端自动化构建分为两个部分:静态资源构建和模板构建,模板构建依赖于静态资源构建。构建工具基本上都是围绕着这些方面去实现。构建工具大致分为三类:

    1、基于任务打包工具,例如Grunt 、Glup 。

    2、基于模块化打包工具,例如、、.js 。

    前端自动化是什么意思_wed前端是什么意思_前端自动部署工具

    3、整合型工具,例如、Fis、jdf 、、 、。

    至于选择哪一款工具,还要根据自己的喜好和项目。

    其实,我个人对这些构建工具是有逆反心理的,是抗拒的。原因是我认为,工具的出现,虽然释放了很多的工作量,但在方便的同时,也让我们忘了它最初的起源,就像城市里的孩子天真的以为鸡蛋是从冰箱里长出来的一样,有大多的人已经不知道最基础的代码该怎么写。对于构建工具,你怎么看呢?

网站首页   |    关于我们   |    公司新闻   |    产品方案   |    用户案例   |    售后服务   |    合作伙伴   |    人才招聘   |   

地址:北京市海淀区    电话:010-     邮箱:@126.com

备案号:冀ICP备2024067069号-3 北京科技有限公司版权所有