❶ 前端自动化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, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})
如果上线前简单的将这两个文件合并在一起，那么a模块是不能找到b模块，因此这样的做法是行不通。一个规则是根据文件的路径，给每个模块加上一个唯的id，id的值就是该模块的路径：
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// 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
0
0
专栏目录
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_moles 下有一个 .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
[email protected]
在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
©1999-2023北京创新乐知网络技术有限公司
iamaddy
码龄8年
暂无认证
3
原创
42万+
周排名
115万+
总排名
8683
访问
等级
122
积分
2
粉丝
3
获赞
0
评论
1
收藏
私信
关注
热门文章
聊聊前端自动化 3903
扒一扒前端构建工具FIS的内幕 3474
web前端性能优化–缓存 1306
分类专栏
javascript
3篇
技术
3篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
扒一扒前端构建工具FIS的内幕
web前端性能优化–缓存
2015年1篇2014年2篇
举报
————————————————
版权声明：本文为CSDN博主“iamaddy”的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iamaddy/article/details/42364137
❷ Canvas开发的前端页面自动化实现求助
现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。
我们首先来回想一下之前我们是如何来开始做一个项目的。
① 首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖，比如：
拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
② 然后，进行编码
编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………
③ 编码完成，进行语法检查，文件合并和压缩
HTML去掉注析、换行符 - HtmlMin
CSS文件压缩合并 – CssMinify
JS代码风格检查 – JsHint
JS代码压缩 – Uglyfy
image压缩 - imagemin
整个过程都在重复无用繁琐的工具...
渐渐的，一些自动化构建工具出现了，人们开始使用例如Bower、Gulp、Grunt、node、yeoman等等工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势，所以学好自动化构建也就是为自己的开发打下了良好的基础。
❸ 如何用webpack实现自动化的前端构建工作流
1.首先 git clonehttps://github.com/bjtqti/font-end-boilerplate.git 一份到本地
2.然后 npm install && npm run start
3. 最后打开浏览器，运行http://localhost:4000
5.解析一下这些目录的用途：
|- dist下面存放发布的js、css 文件 （自动生成）
|- node_moles 下面是npm安装的包文件 （自动创建）
|- src 存放具体的业务代码
|- task 存放webpack的配置代码
|- task
|- webpack.api.conf.js 用于webpack的api方式的配置文件 server.js用到
|- webpack.dev.conf.js 用于CLI方式使用webpack 的配置
|- webpack.prod.conf.js 用于生产环境打包输出的配置
|- .postcssrc.js post-loader的插件配置文件，由于后面用了postcss.config.js所以重命名了这个
|- .babelrc babel的配置文件，为了解析es6语法
|- .gitignore git的配置，指出要不参与版本控制的文件及文件夹
|- .package.json 包配置文件
|- postcss.config.js post-loader配置
|- README.md github.com自动创建的项目说明文件
|- server.js 本地开发调式用的web服务器
需要重点掌握的是package.json 其次是server.js 和 task相关的配置内容
先看看package.json:
{
"name": "shop",
"version": "1.0.0",
"description": "webapp frontend shop",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "webpack-dev-server --config ./task/webpack.dev.conf.js",
"build": "webpack --config ./task/webpack.prod.conf.js",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"mall",
"shop"
],
"author": "frog",
"repository": "https://github.com/bjtqti/font-end-boilerplate.git",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"html-webpack-plugin": "^2.29.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.0",
"webpack-hot-middleware": "^2.18.0"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.15.0"
}
}
这个文件其实就是一个json对象，里边重点掌scripts 的用法。比如start：node server.js 对应 npm run start （或 npm start) 这条命令就相当于是在node环境下运行了server.js
那么server.js(文件名可以自已定）里边保存了一些什么内容？
var express = require("express");
var webpack = require("webpack");
var path = require('path')
var app = express();
var webpackConfig = require("./task/webpack.api.conf.js");
var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
contentBase: webpackConfig.output.path,
publicPath: webpackConfig.output.publicPath,
//hot: true,
//stats: { colors: true },
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
//lazy: true,
//path:'/hmr',
log: () => {}
})
app.use(express.static('./dist'));
app.use(hotMiddleware)
app.use(devMiddleware)
app.listen(4000, function () {
console.log("Listening on port 4000!");
});
其实就是使用了express来搭建一个小型的开发服务器。然后引用webpack-dev-middleware和webpack-hot-middleware两个中间件，结合webpack.api.conf.js的配置，实现打包和热加载src下面的代码。由于这里涉及到express的知识，不打算涉及全栈的前端只需了解一下即可，因为后面还有一个封装好的工具可以替代这些工作--webpack-dev-server
所以我在script中添加了一个dev：webpack-dev-server 的命令，这全完是为了方便学习这两种方式的应用，实际上任选其中一种就好了，这一种可能会感觉更简单，因为它是第一种方式的封装，但是要深入的了解，还是建议看看第一种方式，Vue-cli也是采用的第一方式，因为它可供开发者自由支配的空间更大。唯一需要注意的是，如果使用webpack-dev-server的话，目前还不能用webpack3.0+。
接下来运行npm run build 看看，dist目录下是不是多了一些文件？这就是将来可以直接发布到线上的代码了。
到这里，打包，发布 都介绍完了，下面简单演示一下热替换（也就是所谓的无刷新替换效果）。为了演示方便，我在src下放了一些代码.
当我们打开http://localhost:4000的时候，浏览器上有一段绿色的文字:Hello world 还有一个时间毫秒数，加这个毫数的目的是为了演示，如果页面刷新了，数字会改变。
然后修改style.css中的内容，比如把字体颜色改成红色，浏览器上的字体颜色也相应的变化了，而数字没有发生改变。如果手动刷新的话，可以看到数字是会变化的。
这不仅会节省时间，而且对于要保存页面状态（比如某按钮选中）的情况非常有用。当我们修改hello.es6的时候，页面变成了自动刷新，这是因为我没有使用js的热替换加载器。
如果对html的修改，也想要自动刷新的话，需要用到插件，发出相应的事件。比如vue-cli中的方式：
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
这里只是发出一个通知：action:'reload'，要使页面自动重新加载，还需要有一个接收通知的代码：
比如在入口中加入：
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
这个地方比较深奥，没有弄明白也没关系，有其它方式同样可以实现。比如webpack-dev-server 内部已经自动完成了对不支持热替换的加载器，自动降为刷新。
这也是为什么在开发环境下使用了extract-text-webpack-plugin（提取css的插件）后，样式的热替换变成了刷新效果的原因。
❹ 这些自动化的工具，让Web前端开发工作更轻松
Web前端自动化工具之一：LiveReload
LiveReload技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作。目前实现LiveReload的方式很多，如果你倾向于图形化的桌面应用，可以尝试一下。这款应用同时有Mac版和Windows版，使用起来也很简单，设置好需要监听文件所在的文件夹，然后将一段脚本插入到HTML页面即可。
Web前端自动化工具之二：Webpack
现在做前端开发，通常还会涉及到预处理器，虽然技术的多样化给我们带来了更多选择，但要这些技术产生的代码在浏览器中获得一致的表现，还得将其转化为浏览器支持的类型。Webpack是一款模块加载兼打包工具，丰富的插件让这款工具非常实用。虽然现在Grunt 和Gulp作为两款前端自动化工具非常流行，但其实Webpack结合Npm脚本在大多数场合就已经足够了。
Web前端自动化工具之三：WeFlow
WeFlow 是最近腾讯团队推出的一款前端开发工作流工具。WeFlow一个高效、强大、跨平台的前端开发工作流工具，具体的说就是一个GUI的前端工具，可以为用户提供一套标准化、规范化的工作流程，从而让大家在交接协作的时候更为高效有序。
Web前端自动化工具之四：CodeKit
除了免费的工具，还有一款付费工具值得一提。CodeKit是Mac下老牌的前端开发辅助工具，目前价格32美刀。虽然不便宜，但功能强大，号称可以编译目前所有的前端脚本，支持浏览器自动刷新，内置Bower，第三方包的安装只需要一次点击即可完成。图形化的界面操作起来也很方便，不差钱的同学可以考虑。
以上就是小编为大家介绍的目前常用的Web前端自动化工具。前端作为互联网产品研发的重要环节，工作量势必会越来越繁重，所以能合理的运营一些自动化的工具，不仅仅可以提高自己的工作效率。同时也可以让前端开发工作变得更加简单。
❺ 如何进行前端自动化测试
没人邀请，路过回答。
前端测试是前端工程方面的重要分支，有过一些探索，这里简单分享一下。
首先，还是要强调一点：
前端是一种特殊的GUI软件
看过我最近一年内做前端工程方面相关分享的人可能有印象，我总是在强调这一点。前端测试也跟这个理论基础有所关联。
在这里，我还想吐槽一下：
API测试方法论在测试GUI时并不能解决所有问题。
与很多前端工程师讨论过前端测试，大家更多的还是盯着API测试方法论。诚然，前端有那么一小部分代码是可以用API测试保证质量的，但前端项目中的绝大多数代码是GUI界面，前端测试应该向传统GUI测试方法论需求解决方案：GUI软件测试_网络 ，这个网络词条介绍的很不错，大家可以感受一下GUI测试相关概念和方法。它的测试用例、覆盖率统计、测试方法等等都与API测试有着很大的不同。
统一了这个认知之后，我们来讨论一下前端GUI测试的特殊性。根据网络词条上的那些介绍，相信大家都能感觉到GUI测试的成本非常高，而前端这种特殊的GUI软件，具有天生的快速迭代特征，这使得case维护成本也变得非常高，经常跟不上迭代速度。
一
个标准的互联网应用产品的前端部分，我粗略估计大概有20%的业务基础代码比较稳定，比如通用组件、通用算法和数据模块等，可以针对这些建立复杂一些的
API和GUI测试用例来保证质量。剩下80%的部分不是很稳定，每天都在迭代，针对他们维护case的成本非常高。目前业界中号称做了自动化测试的项
目，也大多是在做那稳定的20%。
关于稳定部分的单元测试方法我这里就不赘述了， @貘吃馍香 的答案给出了很多关键字，有兴趣的去搜索就好了。我想讨论的是针对剩下80%不稳定部分的工程化测试方案。据我了解，前端测试面对这些问题还是很无力的，业内大部分团队还是靠堆人解决。
面对这种现状，我其实也没想到过什么好的方法，基本原则就是：以最低的成本建立和维护自动化测试用例。到目前为止，就想到过两个方案（都不是测试方案，只是回归测试辅助）：
1. 不太靠谱的“超级工位”大法。
这个方案可以说根本不是什么技术方案，而是一个办公设施，就是我们准备一个工位，摆上所有我们需要测试的主流设备，然后设备通过某种方式与一台电脑相连接，测试人员坐在工位上，在电脑中输入某个url，就能同步到所有设备中，然后开始逐个的人肉测试。
超级工位大法示意图（应该很多设备的，这里就是随便展示一下而已。。。）超级工位大法示意图（应该很多设备的，这里就是随便展示一下而已。。。）
相比现在的前端GUI测试，超级工位已经算是从0到1的飞跃了，虽然没解决什么技术问题，但为测试前的准备工作做好了铺垫。如果把前端测试比作吃屎，超级工位就是为这餐准备了一个好一点的餐桌。。。
2. 靠谱一些的“页面差异监控”
12
年的时候还在网络，当时有同事去美国参加velocity，twitter分享了一下他们的开发流程，其中有一个环节就是页面对比监控，利用了一个叫
pdiff的工具，每次提交代码，会自动对比页面之间的差异然后提醒测试人员注意回归。这也是一个典型的GUI测试零成本维护用例的案例。不过pdiff
这个工具是基于像素对比的，误报率比较高，所以去年我做了一个这个项目：fouber/page-monitor · GitHub 基于DOM树的diff，这样就能很大程度上自主控制要监控的元素，可以设置监控样式、文本的变化，比起像素diff智能了一些。
其
工作原理就是利用phantom或其他headless浏览器访问页面，然后截图，然后执行一段js，遍历整个dom树，获取元素计算样式和元素内文本内
容，构造出一个JSON结构，然后每次diff这个json来判断页面差异，并标记在截图上展示。dom树的diff过程有点类似react的虚拟dom
树diff。
（react的dom树diff算法示意图）（react的dom树diff算法示意图）
（react的dom树diff算法示意图）（react的dom树diff算法示意图）
DOM树diff我们可以分辨出元素样式修改/内容修改/新增元素/删除元素四种不同的页面差异，我们可以配置选择器来忽略元素。四种页面差异的效果图：
新增元素（绿色区域标记部分，“i am new here”）新增元素（绿色区域标记部分，“i am new here”）
删除元素（灰色区域标记部分，“你好”）删除元素（灰色区域标记部分，“你好”）
内容修改（黄色区域标记部分，“百-度”，“新-浪”）内容修改（黄色区域标记部分，“百-度”，“新-浪”）
样式修改（红色区域标记的部分）样式修改（红色区域标记的部分）
基于这样的页面差异对比监控，我们可以建立一个任务系统，把应用的所有页面url监控起来，这样每次版本迭代提交代码后，系统就能自动告诉我们，哪些页面的元素展现发生了改变，用于确定回归范围。
用监控的方式确定测试回归范围，是一种“少吃屎”的手段，符合工程化要求，能比较大范围的应用，虽然不能完美解决GUI中的交互问题，但能保证GUI的展现问题已经是不小的进步了。
❻ 前端自动化测试框架Jest 基础入门-
一、引言
前端这几年发展的非常迅速，我们的系统的功能正在变的越来越复杂，这对我们的前端工程化能力提出了更高的要求，听到工程化，大家的第一反应肯定是高质量的代码设计和高质量的代码实现。
但实际上，前端 自动化测试 也是前端工程化里面非常重要的一个环节。
二、 Jest 基础入门
一个普通前端听到自动化测试，第一反应可能是：我工作这么多年也没写过测试，这个东西有用吗？
答：非常有用
如果你打开GitHub，去看一下流行的开源库或者框架的源码，你会发现，在这些源码里面，全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、rex等等……
开源的工具需要稳定性，而引入前端自动化测试为开源项目提供稳定性，是再好不过的选择了。
三、学习前提
阅读这篇 文章 需要以下知识储备：
·js、es6 基础语法
·node、npm 相关知识
·git 的相关操作
·react或者vue，至少了解一个
·状态管理工具，至少了解一个
四、背景及原理
首先在任意目录下创建一个math.js文件，假设这个文件是一个数学库，里面定义两个函数，分别是加法和减法：
// math.js
function add(a, b) {
return a + b;
}
function minus(a, b) {
return a - b;
}
这时候我们可以在业务代码里去使用这个数学库。
但是，假如，上面的minus函数我们不小心写错了，把减法写成了乘法，如果直接在业务代码中使用这个方法，就会带来无法预期的bug。
所以这时候，我们就需要对math.js这个公共库进行自动化测试，确保没问题之后，再让业务组件去调用，这样就会保证不会出特别多的bug了。
我们可以这样做：
在该目录下创建一个math.test.js文件，然后写一点测试代码：
const result = add(3, 7);
const expect = 10;
if (result !== expect) {
throw new Error(`3 + 7 应该等于${expect}，结果却是${result}`);
}
const result = minus(3, 3);
const expect = 0;
if (result !== expect) {
throw new Error(`3 - 3 应该等于${expect}，结果却是${result}`);
}
这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个 测试用例 都通过了。
这就是自动化测试最原始的雏形。
然后我们思考一个问题，如何将这堆代码进行简化，做成一个公用的函数，比如这样：
// 测试 3 + 3 是否等于 6
expect(add(3, 3)).toBe(6);
// 测试 3 - 3 是否等于 0
expect(minus(3, 3)).toBe(0);
expect 方法实现：
function expect(result) {
return {
toBe(actual) {
if (result !== actual) {
throw new Error("预期值和实际值不相等");
}
},
};
}
这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个测试用例都通过了。
虽然实现了 expect 函数，但是报错的内容始终是一样的，我们不知道是具体哪个方法出现了问题，这时候我们就会想到，我们需要将这个 expect 方法进一步做改良，我们如果能在 expect 方法外部再包装一层，就可以多传递一些额外的内容，比如创造这样的写法：
test("测试加法 3 + 3", () => {
expect(add(3, 3)).toBe(6);
});
test("测试减法 3 - 3", () => {
expect(minus(3, 3)).toBe(0);
});
这样封装之后，我们既能进行测试，又能得到测试的描述。
test 方法实现：
function test(desc, fn) {
try {
fn();
console.log(`${desc} 通过测试`);
} catch {
console.log(`${desc} 没有通过测试`);
}
}
所以前端自动化测试到底是什么？
答：实际上就是写了一段其它的用来测试的js代码，通过测试代码去运行业务代码，判断实际结果是否满足预期结果，如果满足，就是没有问题，如果不满足，就是有问题。
上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。
❼ 前端如何提升开发效率
来具体聊一聊提高前端工程师开发效率的那些方法！
当然除了以上5点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。
❽ 前端UI自动化puppeteer实践
背景
在表单（web页面）测试过程中，要经常对表单基本功能进行回归，曾经考虑过使用webUI自动化工具，减少重复性的操作，但是因为之前用过appium，对UI自动化的体验不是很好，所以有些纠结，但是，再仔细想一下，有可能存在比较好用又确实能提升效率的工具，也不妨去尝试一下。
上网查询了一下，puppeteer具有可以使用录制脚本的工具puppeteer-recorder、截图等功能，找了个demo开始试了一下，发现坑较少，安装方便，使用比较流畅。
puppeteer介绍
Puppeteer 是一个Node库， 它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless。详见文末参考链接。
效果展示
目录结构
cases：用例脚本
config：配置文件，可区分测试、线上环境
screenshot_outputs：输出的截图文件
utils：用到的通用方法
测试思路
1、在脚本中写入测试执行步骤
2、运行脚本
3、查看执行结果（截图），查看是否符合预期。
这样操作会使简单很测试很多。就拿表单人工审核为例，全部人工操作的话，需要填写并提交表单，登录表单运营后台，找到对应的目录及表单，对表单进行审核，再重新打开表单并进行查看，而自动化的话，在写好脚本（在脚本中可进行接口请求）之后，就可以直接运行脚本，查看结果。
环境搭建
1、安装puppeteer：npm install puppeteer（前提是安装了node、npm）
2、安装chrome插件puppeteer-recorder（可自行网络，比较简单）
3、npm init，初始化一个项目
脚本编写
遇到问题
1、puppeteer-recorder只能录制获取元素、点击元素操作，没有获取到填写文本的操作，需要修改或添加已录制好的脚本
2、有些地方例如截图前，接口请求结束后，需要使用等待方法。await page.waitFor(3000)
3、使用await进行接口请求，不然会出现同步异步问题，后面的语句开始执行（但是要用到的参数还没有获取到）
参考：
https://zhuanlan.hu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b
❾ 如何构建自动化的前端开发流程
自动当然是相对于手动而言的。
手动：
自己放置并引用JS库和CSS框架
自己处理各个模块的添加/删除/依赖关系
自己压缩合并JS和CSS
自己构建测试环境
自己FTP传到网站上部署
自己备份各个版本的差异
总之就是什么都自己来
自动：几条命令电脑做。
如果没有手动开发一个完整前端项目的经历，请先至少手动来一遍。其一是体验下有多麻烦，其二是不熟悉操作背后的本质，也用不好自动化工具。然后再学开发流程自动化就明白了。
❿ 前端自动化部署解决方案
对象存储服务都有提供对应的控制台管理桶，同时也提供响应的API供后端业务调用。
aws-s3官方提供了命令行终端操作库可以方便在命令行发布我们的静态资源： https://aws.amazon.com/cn/cli/
我们可以这样发布：
腾讯的cos可以使用很轻量第三方库 cos-manager 发布资源: https://github.com/yansenlei/cos-manager
npm script 类似shell 的 exec，可以帮助你执行多个并行或顺序执行的命令，我们可以一次性执行 删除本地dist资源->打包->发布
参考：
https://docs.npmjs.com/misc/scripts
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
以上发布我们可以这样写：
一个命令，提包走人。（虽然走了有点慌...）
持续集成是一种软件开发实践，每一次发布源码都会集成一次，每一次都会自动化的构建，这意味着也可以把上面的发布脚本在服务端跑起来，打包 测试 发布全部交给CI处理，目前主流的工具是 Travis CI ，具体可以参照： http://efe..com/blog/front-end-continuous-integration-tools/