在css中font : 88%1.4 Calibri, "Lucida Grande", Verdana, sans-serif; 88%1.4什么意思？

2023-04-02 00:55:01html-css011

在css中font : 88%1.4 Calibri, "Lucida Grande", Verdana, sans-serif; 88%1.4什么意思？,第1张

88%/1.4

88% 为字体大小，这个字体大小是相对于父级字体的大小，如，如果父级的大小为

14px 那么这里的大小就为：14*88% 这个大小

后面的 1.4 为1.4倍的行高。

以上……

先来说说为什么要自动化。凡是要考虑到自动化时，你所做的工作必然是存在很多重复乏味的劳作，很有必要通过程序来完成这些任务。这样一来就可以解放生产力，将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业，而成为一个复杂的工程时，还涉及到性能优化一系列工作等等，这时自动化已然是迫切的需求。

早期的网站开发

在还没有前端工程师这种分工如此明确的岗位时，大家所理解的前端工作无非就是制作网页的人，包括html、css、js等。稍微高级点的可能就是php了，可以读写数据库，可以称之为动态的网页。通过近几年的发展，分工越来越细，在大公司如BAT三家，基本是把前端分开来了，有专门的人写js，有专门的人写css。以前一个网页可以一个人搞定，包括切图，写页面到写逻辑，无非是几个资源链接拼凑起来。当然逻辑性不强，页面不重。

最简单的页面如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

hello world

</body>

....

</script>

</html>

这样几个html标签就能展示成网页了。顺便写几个逻辑，填写几个表单就差不多了。这就是早期的网页。

javascript库

有一次需求你做了一个页面，然后第二次需求，你领导又让你做了页面，只是这次与上次的逻辑都差不多，就改改样式皮肤，修改图片等等。这样你就要从原来的地方拷贝一份代码过来。如果有一天发现一个bug，你就需要修改两处地方，这使得你非常的恼火，于是就把公共的逻辑抽取出来，两个页面都引用这段代码，这样就很好的解决了这个问题。以后有第三个第四个页面，你也不会担心了。渐渐的公共的代码越来越大，又是个独立的文件，这个文件就成为了一个库文件了，就像jquery等等。

模块化

随着业务的不断扩大，页面越来越多，逻辑越来越重，之前你提取出来的库文件越来越大，功能越来越多。A页面只引用了其中的一部分函数，B页面C页面同样如此，后来你决定将库文件拆分成更小的模块，由各自的功能决定应该在哪个模块。这样一来前端开发就此演化为模块化开发方式。你开发的产品就像搭建积木一样，将各个模块组装在一起。

网页优化

好了，现在你的工程很庞大了，文件数量新增了非常的多，JS模块也很多，这时候一个页面也能加载了上十个js文件或者好几个样式文件。用户访问你的网页的时候需要把这些资源从服务器下载下来，所以理论上来说，想要加快你的网站，比必须减少下载的时间。可以从下载的数量和下载的大小出发，在不做大改变的前提下就是减少HTTP请求数以及压缩文件大小。雅虎的网页优化十四条军规中很大一部分是针对这种情况进行优化，如：

1、合并请求

2、使用雪碧图

3、压缩js、css代码（除去空格，混淆等等）

4、延迟加载

在PC时代，这些问题可能不是那么尖锐。移动互联网的兴起，对网页速度提出了更高的要求，因为网速相对比较慢。也有新的优化措施出现，比如缓存js文件等。可是要做到这些，并不是很容易。假如你的页面引入十个JS文件，这样发布出去显然是不好的，所以你要手动合并，将十个JS文件合并成一个，或者几个。然后还要将合并后的文件进行压缩。发出去之后产品经理发现有个小问题需要优化一下，这时候你又要重复刚才的工作。如果这样的事情发生三次，或者更多次，你会变得恼火。当然这只是令你恼火的一点点因素而已，更多的还有合并雪碧图等等。

经历过几次痛苦之后，你会发现性能优化与工程本身之前存在一些矛盾的地方。就是在优雅的开发的同时，兼顾性能方面的考虑实在难以做到。这时自动化工具太有必要了，将开发与发布隔离开来。按照优化的准则，利用构建工具，在发布的时候轻松一键搞定，这将是最理想化的作业方式。

一些构建工具

nodejs的出现，给前端开发带来了一些改变。在没有任何语言障碍的情况下，前端同学可以转为后台开发，nodejs带来另外的一个福音便是构建工具。之前的压缩合并工具大多是由java编写的，像雅虎的yui compressor，但对没有java基础的前端开发来说，至少要走不少弯路。然后最近一两年比较火的是国外的grunt和gulp，以及国内的FIS。相比而言，国外总是走在前头，在探索更好的开发方式，做出了很多探索。

grunt

之前在鸟厂的时候，在组内也尝试推广过模块化的开发方式，主要是用seajs模块加载器，关于这个的好处我这里就不展开说明了。这种方式从11年开始到现在基本已经得到了认可，或者说是未来的趋势，ECMAScript 6已经将模块化加入了规范。等到浏览器支持应该是几年之后的事情。这种模式主要是参考了nodejs，将其思想运用到浏览器上。seajs模块化的诟病之处便是网络请求，上线前面临的一个问题就是模块太多，有十几个文件，需要合并和压缩，而且还不能简单的将文件合并在一起。有一套他自己的规则。

在开发的时候，一个模块对应一个文件，如下：

// a.js

define(function(require, export, module){

require('./b')

// xxxxx

})

//b.js

define(function(require, export, module){

// xxxxx

})

如果上线前简单的将这两个文件合并在一起，那么a模块是不能找到b模块，因此这样的做法是行不通。一个规则是根据文件的路径，给每个模块加上一个唯的id，id的值就是该模块的路径：

// a.js

define('a', function(require, export, module){

require('./b')

// xxxxx

})

//b.js

define('b', function(require, export, module){

// xxxxx

})

所以在自动化的过程中，需要提取模块的唯一ID，然后再进行合并。

grunt的插件很多，也非常的成熟，能够满足各式各样的需求。作为新手，我是琢磨了大概半个月的时间才大概了解了其配置文件的意思，但也只是知道用，不明白个所以然。grunt的运作方式就是根据配置文件加载相应的插件，完成相应的任务（task）。当时中文资料比较少，英文也比较晦涩，尤其是配置文件中各配置项的意思不太明白。而当文件多起来了，构建的效率明显跟不上。加上组内也不太重视，所以就没怎么去折腾了。转去鹅厂之后，grunt就无疾而终了。

gulp

没有在实战项目中运用过，暂不说明

组内的构建工具

刚来到鹅厂时，也有自己的一套构建工具，比较单一，项目不大。主要是将上文提到的seajs所带来的文件解决掉，提取模块ID，合并之。随着业务的发展，越来越不满足实际的需求，后来索性放弃了它，转而投向百度的FIS。

FIS构建工具

放弃之前的构建工具是因为一个尖锐的问题引起的，就是在发布的时候，有一段时间将会引起外网报错，就是页面已经出去，js文件却还是旧的，即使你在文件后面加上了查询参数也不太起作用。加上浏览器和CDN本身的缓存，这个问题一时之间找不到好的解决方案，唯一的办法就是采用新的文件，文件加上自身的hash值作为文件名。这样一来就瞄准了百度的FIS，它能够简单的实现我们所需要的功能。

核心思想是文件的定位，也就是在开发测试的阶段并不需要将文件hash，只需要在上线的那一刻来做这步。找到原有文件的依赖，将其替换为新的文件名。

理想都很美好，但现实真的很残酷。FIS上手相对于grunt是要简单些，但其一点也不简单。需要理解整体的思想才能去实施，而且小白用户基本不会使用，除非是一些简单的合并需求。但复杂的业务场景FIS是满足不了的。包括前面提到的模块ID的提取，seajs模块文件的合并等都需要进行二次开发才能够做到。

很多页面是嵌入到APP内部的，APP本身也可以做一次缓存，根据特定的文件名规进行缓存，彻底消灭了304请求，如果每次都是新文件，在服务器端也可以配置更长久的缓存期，所以这里也需要定制开发。

FIS最值得诟病的地方就是全局构建，这一点不仅使得构建速度快不起来，而且生成的新文件特别多，导致发布的时候去挑选文件。在多人协作开发的时候，会产生冲突，发布的过程极其的痛苦，不知道百度内部的人是怎么使用的。望着文件夹满是hash的文件名，瞬间就奔溃了。这是小组内部使用FIS后，血的教训。

后来决定大刀阔斧的对FIS进行改造。在构建的时候只生成相关的资源文件，核心是找到该文件所依赖的所有的资源文件。当然还是全局构建，只是在生成文件的时候不生成其他不相关的。

这样发布工作变得非常轻松，一目了然。然后配合现在的发布工具，基本上整个开发发布流程也比较顺畅了。那天小组会议讨论，构建工具的理想目标是什么，这个问题我也没有细想过，总之就是要从重复的劳动中解放出来，把时间花在值得的地方。或许可以采用一键发布，这可能就是理想，也是后期可以考虑再优化的地方。

现在组内所采用的构建工具，已经和FIS本身有很大的差别了。进行了很多地方的改造，后面有机会进行整体的开发发布流程分享，以及我的一些构建思路。

iamaddy

关注

专栏目录

4款前端自动化构建工具的介绍与对比.zip_java自动化框架

01-07

4款前端自动化构建工具的介绍与对比.zip 大家都知道webpack是当人不让的前端自动化构建工具,但是除了它还有其它常用的前端打包工具存在,现在我们来比较4款

前端自动化构建工具(Grunt,、Gulp、 Webpack)

01-02

<span style="color:#404040">使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。本套视频主要讲解当前开发中最流行的三种自动化构建工具: Grunt, Gulp, webpack。从理解什么是构建工具，为什么要用构建工具，到如何去使用构建工具。学习本套视频之前建议先学习 JS 模块化。</span>

如何实现自动化前端开发？

CSDN资讯

7051

IDE不仅是文本编辑器，还是编译器、生成器、调试器和集成器。作者 |Nicolus Rotich 译者 |弯月，责编 | 郭芮出品 | CSDN（ID：CSDNnews）以下为译文：每一行代码都可以表示为字符串变量，无论代码本身执行了哪些操作。这就是我们使用文本文件（即集成开发环境，IDE）向计算机发布指令的根本原因，我知道你一定在想：文本编辑器的名字也太高级了吧。...

前端自动化发布实战总结

weixin_34418883的博客

163

为什么要做今年4月份，开始自己的第二份工作，习惯了老东家如丝般的发布体验，一下子感觉来到了“原始社会”。首先这是一篇长文，主要介绍自己在做自动发布这个过程的一些思考。引用玉伯的Web研发模式演变来说，现在我们处于 - Web1.0时代：前后端代码耦合 java环境对前端过于复杂缺乏工具和规范，代码难维护内嵌代码：html内嵌js，j...

前端项目自动化部署

最新发布

@SCY

392

本文主要内容为三个方面：一、使用Git仓库来管理项目二、如何使用云服务器三、使用Jenkins进行自动化部署

如何实现Web前端自动化？让这些工具帮助你

xiaoxijing的博客

1569

随着前端技术的发展，前端开发从静态网页的开发到复杂的前后端交互再到基于node.js的全栈开发，前端需要做的事情越来也多，前端代码的逻辑和交互效果越来越复杂，越来越不易于管理。模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。在新技术不断涌入的多元化发展模式中，Web前端工程师的工作量也越来越大。前端自动化构建在整个项目开发中越来越重...

前端工程化实战 - 自动化构建工具

每天进步一点点

496

最典型的运用场景就是在去开发网页应用时就可以使用： main.scss index.html package.json 安装 Sass 模块安装完成后，在 node_modules 下有一个 .bin 目录，这个目录下有一个 Sass 的命令文件，可以使用指令打开帮助信息将 Sass 文件转换成 CSS 使用或启动实现自动化构建（1）安装 browser-sync 模块，用于启动一个测试服务器，去运行项目（2）在 scripts 中添加 serve 命令，通过 br

前端自动化部署

qq_41206257的博客

2689

名词解释集成：在推送或者 merge 代码后自动进行构建打包交付：将上一步生成的代码包发布至测试、生产等环境需求在 git 代码仓库发生变化后，自动执行打包脚本，并且发布至服务器。解决的问题在之前每次开发完毕需要上线之前，需要手动执行 bash 命令打包，并且将打包后的代码人为的拖动至上传应用（FlileZilla Pro）。手动执行构建脚本消耗时间人力而拖动代码文件会存在拖拽错误，覆盖之前的其他项目代码等难以预料的问题工具选择 gitlab/github/gitee Jenki

前端自动化介绍

张营的技术博客

1815

文章目录DevOps介绍前端自动化自动化相关概念问题提出常见现象最佳实践 DevOps介绍相信大家或多或少的听过这个词DevOps，而且看起来很高大上，其实这个是敏捷开发的一种执行流程表现，先来一张经典的DevOps流程图：具体的流程为：先是计划plan，编码code，然后编译build，测试test（Dev）然后发布release，部署deploy，运维operate，监控monitor（Ops）然后发现问题或有新的需求，就重新计划plan。。。如此循环这就是完整的DevOps流程。下

前端项目自动部署

weixin_29005819的博客

1190

一、实现的最终效果点击一下，即可实现项目打包文件压缩(便于上传到服务器) 连接服务器备份上传打包的文件解压完成部署二、原理及需要的插件原理：执行shell脚本需要的npm依赖包：archiver(压缩)，ssh2（执行脚本：如连接服务器，解压等操作）三、详细步骤 3.1 安装包 yarn add archiver ssh2 3.2 引入包和编写配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa

前端自动化测试详解

wdquan19851029的专栏

2405

这篇文章主要向大家介绍前端自动化测试详解,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。 1 前言文章研究了四个问题：什么是自动化测试、为何要自动化测试、什么项目适合自动化测试、自动化测试具体要怎么作。在寻找这四个问题答案的过程当中，梳理了一套完整的前端自动化测试方案，包括：单元测试、接口测试、功能测试、基准测试。 2 什么是自动化测试维基百科是这样定义的html 在软件测试中，测试自动化（英语：Test automation）是一种测试方法，使用特定的软件，去控制测试

Gitlab-ci:从零开始的前端自动化部署

大灰狼的小绵羊哥哥的博客

2669

前言本文为首发原创，同时转载至公众号“全栈前端精选“和“广发证券金融科技”中目录一.概念介绍 1.1 gitlab-ci &&自动化部署工具的运行机制 1.2 自动化部署给我们带来的好处二.知识预备 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本语法规则 2.3 .gitlab-ci.yml配置的特定关键字三.CI实战 3.1 编写一个gitlab-ci的“he

vue前端用服务器上路径的图片展示_谈谈前端性能自动化

weixin_39968640的博客

1445

前述：前段时间出了性能分析的需求，需要对前端页面性能做一套自动化测试工具。领导都发话了，那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续，需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的VUE，后端用的node(由于本人较熟悉前端)，数据库用的是mangoDB。好了，话不多说，上才艺~设计背景 &前...

实现前端项目自动化部署（webpack+nodejs）

winne雪

2097

前言：一般来说，我们前端是不需要关心部署的事情的，只需要把打包后的文件直接丢给后台去部署就可以了。但是呢，如果频繁修改一点东西就要叫后台进行部署，这样后台会很烦（毕竟人家还有其他工作嘛），我们也会很不好意思。或许有些公司会给前端配置可视化操作服务器文件的软件（FTP客户端），这时我们就可以打包后自己到服务器上部署了，如果不同环境需要部署到不同服务器，此时我们又需要区分打包再手动上传到服务器上。这时我们就会想，有没有直接一句命令就能自动化部署到不同服务器上，根本不需要打开软件来手动上传的？？？答案：必

前端项目自动化部署——超详细教程（Jenkins、Github Actions）

q411020382的博客

1374

参考资料 Docker 入门教程

常用的前端自动化构建工具gulp/grunt/fis --简介

杜杜的博客

235

常用的前端自动化构建工具之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力，那么我们会了解 Gulp Grunt fIS 用法基本相同：都是通过一些简单的代码，组织一些插件的使用，然后就可以用工具代替我们一些重复的工作，增强开发效率。 Grunt 是基于内磁盘实现的最早的自动化构建工具 Grunt(点击可进入官网查看) 优点：它的插件几乎可以帮助我们完成任何我们想要做的事情，缺点：由于工作过程是基于临时文件去实现的，所以构建速度较慢。下

前端自动化部署项目到服务器 -- 一行命令搞定，摒弃传统的手工部署 npm run build

一个来自外太空的游客

2353

传统的前端代码手工部署流程如下：传统的手工部署需要经历： 1.打包，本地运行npm run build打包生成dist文件夹。 2.ssh连接服务器，切换路径到web对应目录下。 3.上传代码到web目录，一般通过xshell或者xftp完成。传统的手工部署存在以下缺点： 1.每次都需要打开xshell软件与服务器建立连接。 2.当负责多个项目且每个项目都具有测试环境和线上环境时，容易引起部署错误。（个人之前非常悲剧地遇到过一次，由于同时负责四个项目，八个环境。一天同时可能修改多个项目，

“相关推荐”对你有帮助么？

非常没帮助

没帮助

一般

有帮助

非常有帮助

关于我们

招贤纳士

商务合作

寻求报道

400-660-0108

[email protected]