雪碧图怎么定位(雪碧的定位策略)
前端自动化6部是个车间还是个什么意思
先来说说为什么要自动化。凡是要考虑到自动化时，你所做的工作必然是存在很多重复乏味的劳作，很有必要通过程序来完成这些任务。这样一来就可以解放生产力，将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业，而成为一个复杂的工程时，还涉及到性能优化一系列工作等等，这时自动化已然是迫切的需求。
早期的网站开发
在还没有前端工程师这种分工如此明确的岗位时，大家所理解的前端工作无非就是制作网页的人，包括html、css、js等。稍微高级点的可能就是php了，可以读写数据库，可以称之为动态的网页。通过近几年的发展，分工越来越细，在大公司如BAT三家，基本是把前端分开来了，有专门的人写js，有专门的人写css。以前一个网页可以一个人搞定，包括切图，写页面到写逻辑，无非是几个资源链接拼凑起来。当然逻辑性不强，页面不重。
最简单的页面如下：
!DOCTYPE html
html
head
style..../style
/head
body
hello world
/body
script
....
/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
关注
1
专栏目录
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.当负责多个项目且每个项目都具有测试环境和线上环境时，容易引起部署错误。 （个人之前非常悲剧地遇到过一次，由于同时负责四个项目，八个环境。一天同时可能修改多个项目，
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
??2022 CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页
关于我们
招贤纳士
商务合作
寻求报道
400-660-0108
kefu@csdn.net
在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
?1999-2023北京创新乐知网络技术有限公司
iamaddy
码龄8年
暂无认证
3
原创
42万+
周排名
115万+
总排名
8683
访问
等级
122
积分
2
粉丝
3
获赞
评论
1
收藏
私信
关注
热门文章
聊聊前端自动化 3903
扒一扒前端构建工具FIS的内幕 3474
web前端性能优化–缓存 1306
分类专栏
javascript
3篇
技术
3篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
扒一扒前端构建工具FIS的内幕
web前端性能优化–缓存
2015年1篇2014年2篇
举报
————————————————
版权声明：本文为CSDN博主「iamaddy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：
前端开发中经常遇到的一些英语单词
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君 点击此处 ，
同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。
在前端开发与探讨过程中熟悉并了解一些英语是非常关键的，下面整理了一些基础的前端英语单词，希望对给位有所帮助
首先、页面布局（layout）
header 头部/页眉；
index 首页/索引；
logo 标志；
nav/sub_nav 导航/子导航；
banner 横幅广告；
main/content 主体/内容；
container/con 容器；
wrapper/wrap 包裹（类似于container）；
menu 菜单；
sub_menu/second_menu 子菜单/二级菜单；
list 列表；
section 分区/分块（类似于div）;
article 文章；
aside 侧边栏/广告；
footer 页脚/底部；
title/sub_title 标题/副标题；
news 新闻；
hot 热点；
pro 产品（product）；
company 公司；
msg/info 信息（message）/消息；
ads 广告（advertisements）;
icon 小图标；
img 图片（image）；
copyright 版权；
contact_us 联系我们；
friend_link 友情链接；
tel 联系电话（telephone）；
address 地址；
其次、CSS样式（style）
CSS 层叠样式表 (Cascading Style Sheets) ；
background 背景；
position 位置/定位；
relative/absolute/fixed 相对定位/绝对定位/固定定位；
float 浮动；
clear 清除；
vertical-align: middle/top/bottom; 垂直居中/上/下；
line-height 行高；
margin 外边距；
padding 内边距；
border 边框；
solid/dashed/dotted 实线/线虚线/点虚线；
border-radius 圆角；
shadow 阴影；
display 展示；
hidden 隐藏；
block/inline-block 块元素/行内块；
overflow 溢出；
cursor 光标；
animation 动画；
css sprites 雪碧图/图片精灵；
column 分列；
flex 弹性（布局）；
然后、表单（form）与表格（table）
form 表单；
action 行为；
method 方式/方法；
input 输入框；
label 标签；
password 密码；
radio 单选框；
checkbox 复选框；
btn 按钮（button）；
submit/reset 提交/重置；
textarea 文本域；
select/option 选择框/选择项；
placeholder 占位符（起提示作用）；
search 搜索；
icon 小图标；
autofocus 自动聚焦；
disabled 禁用；
checked 选中（单选框/复选框）；
selected 默认选择项（下拉选择框）；
required 必填项；
readonly 只读；
table 表格；
thead/tbody/tfoot 表格标题/主体/底部；
colspan 跨列；
rowspan 跨行；
cellspacing 单元格间距（类似于margin）；
cellpadding 单元格边距（类似于padding）；
border-collapse: collapse; 边框
相关资料：
详解html中页面跳转传递参数的问题
html5关于标签的知识吧
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群
关于书籍：需要学习资料的小伙伴们可以加群， 点击此处
框左边加一个小图标，css样式应该怎么写
输入框吧？方法很多给两种供选择。
输入框左侧加一个缩进(padding-left)空出图标空间，
1.如果图标是图片文件，作为输入框的背景图，不重复(no-repeat)，通过background-position调整图标位置
2.如果是字体图标，跟输入框放在同一个容器里，通过绝对定位，移动到相应位置
当然，图片文件的图标也可以用方法2，这样就能用雪碧图了
箭头怎么打 css
图片中的箭头用的都是背景图片。
先找到保存这些图片下来，然后再写相应的CSS。
css背景代码：
background:url(bgimage.jpg)?no-repeat?-2px?0px;?//后面的-2px?0px可以去掉或者调整相应的图片坐标位置
假如我有一个i标签不想用雪碧图里的图标怎么办
能用字体图标就用字体图标啊，矢量的，唯一不足就是可能找不到跟设计稿一模一样的，雪碧图还得自己做，麻烦
css 中background-position: 0 -30px设置负数有什么意义呢？
background_position属性有四个参数，分别为 上 右 下 左，如果只用两个参数则默认为 是： 上 右，同时 系统默认上下参数和左右参数一致。所以这里的-30是指左右方向的像素移动-30，你可以实际操作下看下效果.取300或者其他数据比较明显。