1. 前端工具里面gulp和fis，有哪些优缺点
过去几年一直不断地提到Web应用新世代的成长，这些App内容变得越来越丰富，带动了前端整体的复杂度大幅增加。像是Backbone(借由提供模型)、AngularJS和EmberJS框架都是创造新App非常好的框架，增强了所有Web的功能;同时，Web程式语言Javascript在普及度和成熟度上已经进步了非常多，而且还能和NodeJS在后端协同工作。但为了能持续面对复杂度的新挑战，开发者已经创造工具使整体开发过程更加流畅，从测试框架到分析工具，这些成熟又有用的工具把最棒的体验带给我们的使用者。就如同刚刚所提到的，我们喜欢能够帮助我们提供最棒品质的软体，同时也能使得生活变得更加简单方便，本文要分享给大家5个我们每天面对挑战所使用最棒的工具和框架：Chromedevtools这是目前最好的前端开发工具!Chrome自从它诞生后，就已经大量投资在开发者工具软体，至今仍不断的在改善它，每一个发布会(每六周一次)都会伴随着它自己的全新开发功能。这个开发工具是一个完整的多元软体套件，你可以实时编辑DOM(HTML)/CSS，当进行一个深入的效能分析时，可以一步步找出Javascript的错误，甚至能增加终端机指令。感谢有它，近来解决了回报效能的问题。DOM/CSS编辑器是非常强大的工具，能即时回馈给你的团队，能够在UI/UX的新功能上很快地执行回圈。官方网站和GoogleDevelopersYouTube管道都是资讯的金矿，比如说，命令列的API(应用程式接口，)包含非常多有用的指令，比如说从控制台功能中的复制指令，复制到剪贴簿上。许多详细的使用手册同样在HTML5Rocks里都能参考。如果你的好奇心很强，并且想了解浏览器究竟是如何运作的，那么你会在这些教学里学到很多东西，帮助你全面掌控开发周期。除了上述的之外，最重要的是，透过网络工具你能知道现在在接口之下到底发生了什么事情，以及优化你的下载速度，时间轴会以更深入的角度来告诉你浏览器做了哪些事情。如果你跟我们一样充满好奇心，你可以学到关于浏览器、Web是如何运作的，如此一来，你就可以反过来完整的操控应用程式的生命周期。以我个人观点来说，如果它们依照现在的路线持续发展下去，肯定会变成Web供应开发商最终的IDE()，最强大的放入整合发展空间。Grunt说到工作自动化，Grunt是我们的首选。它是Javascript跑任务的专家，针对一般的任务提供大量整合性的外挂程式，扩展程度仍很高，提供很多选项让你能够自由的写任何符合需求的工作内容。最棒的是，你能够将这些任务结合创造更强大而复杂的工作。Grunt的范畴超出仅仅是自动化前端相关的工作，举例来说，当我们在开发时，我们利用它来测试PHP：我们同样也用它暂时解决在Vagrant中自动监测与保护的rsync(Unix下的一款应用软体)一些效能问题，这是近来才被引进的方法。Grunt提供很广泛的外挂程式，从浏览档案夹、诊断讯息、编译程式到最简化你的程式码。它的句法是一致且容易学习的，可以让琐碎的工作变得简单。LiveReload你有没有算过，每天平均有多少次会按键盘上的重新整理键呢?非常多，对吧!LiveReload是一个简单的Web协议，不论档案在哪时候被修改而触发事件，客户都能自行处理事情;客户端和服务器端都能进入各种不同的实作。说到Chrome的扩充功能，Chrome商店就是一个很强大的例子。去体验看看吧，你一定能发现很多让生活变得更简单的东西。以下几个是我们最喜欢的：1.WhatFont：你可以透过它知道在任何网站上内容的字型是什么，当你在找最适合的文字编排时，或是重新调整美化你的字型风格时，它是非常好用的小工具。2.Pageruler：另一个很好用的应用程式，主要是因为任何前端开发者，都对像素要求百分之百的完美。3.ProxySwitchySharp：说到找出在地化资讯错误最佳的工具就非它莫属，在地化资讯是哪些?比如说电话号码、预设货币等等。想知道吗?在ChromeApp中你能得到资讯!Mocha/Chai/Sinon测试测试，测试到你很想吐吗?这是很常发生的，因为需要一大堆引导指令，而且在前端开发的初始阶段没有设计好测试，那么后面的工作往往会变得非常困难。很幸运的是，我们现在有很棒的测试架构，就和你已经在使用的其他语言一样，非常的有用和强大。两个主要的框架是Jasmine和Mocha。过去我两个都有使用过，最终选择了后者，Mocha。它最主要的优势在于，当你必须和异步的编码一同运作的时候，在Javascript的发展中它最普遍使用的方法。比如说，举一个非常简单的例子，这里有两个不同的规格，一个由Jasmine写，另一个则是Mocha/Chai：Jasmine的句法选择是预设的，并以官方的文档作说明，非官方的扩充功能增进了Jasmine异步特色，提供和Mocha一样的功能。花一些时间，来了解这个范例以及观察Mocha的语法有多清楚。不像Jasmine，Mocha只提供行为的测试架构，关于BDD(Behavior-drivendevelopment)，而不是假物件(mock，主要存在的目的是协助单元测试程式可以顺利进行)或是断言(assertion，放在程式中的一阶逻辑，如果一个结果为真或为假的逻辑判断式)架构，因为它整合专用架构非常棒，就像是Chai和Sinon，几乎没什么不好的地方。Sinon有完整的功能来mock假物件和stub假物件(用途和mock很接近)。举例来说，你可以如何评估的方法，一直以来都使用Sinon的间谍类型(撷取自很杰出的文档)：Chai的功能是在断言这方面是非常杰出的，以和平常的语言非常相似的语法，举例来说你可以看到以下的程式码，就知道它很清楚简单：Karma最后一个是Karma，Karma(一个测试程式是否符合需求的测试工具)是Javascript的程式测试工具，由AngularJS的团队写的，现在你可以徜徉在Mocha、Chai和Sinon中写测试程式，何不同时用它们持续地测试、跑程式，给你实时的回馈呢?Karma可以让你从你的工作站到持续整合制造(CI，ContinuousIntegration)执行你的测试，它能同时发布到多个浏览器(Chrome、Firefox、IE和PhantomJS等等)，除此之外，还能跑你的测试来挑战它们，给予你对你的程式码最大的信心。当然，我们甚至还没有提到任何文字编辑器，SublimeText和Vim我们都有用，它们是我们生产力最最重要的基础。然而在做开发的过程中，最真实的快乐就是你第一次写的程式进行监测然后得到结果，这是一种实时的成就感，然后接下来你就能将它们发布到浏览器上。现在你已经非常有能力成为前端的忍者，在你的开发旅途中已经准备好要迎接每个挑战了。。
2. fis什么意思
FIS全称为Front-end Integrated Solution，即前端集成解决方案。前端团队发展大多会经历规范设计、技术选型、系统拆分、性能优化等阶段，其中的技术需求可以总结为前端集成解决方案。
3. 前端工具里面gulp和fis，有哪些优缺点
优点和缺点：
gulp轻量级，你的项目可能由于历史原因，或者其他原因，fis的一些基础要求可能和你项目有冲突。比如你可能只想处理整个项目中的一个模块，或者你不太想在本地开发使用绝对路径，或者你的项目和程序员分工页面模板（jsp，php等）和前端资源不在同一个资源位置。这个时候你更适合使用gulp来定制自己的解决方案。
但是gulp使用者来说，并不是每个人都有非常强的处理错误能力，如果遇到插件bug（当然这种情况很少见），需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。
fis相对来说因为有专门的QQ群天天为用户答疑解惑收集bug处理bug，压根就不用担心太多问题。另外fis的一些解决方案确实是目前前端优化里面会需要真实考虑面对的。接触fis会让你对整个前端的优化和加载管理有更深入的了解，当然如果你已经了解很透彻了。我相信对于选择gulp 和fis这种困惑应该也不会存在。
4. linux 怎么给往往也升级fis
第一种使用ifconfig命令配置网卡的ip地址。此命令通常用来零时的测试用，计算机启动后
ip地址的配置将自动失效。具体用法如下。Ipconfig ethx ipadd netmask x.x.x.x。
其中ethx中的x代表第几快以太网卡，默认第一块为0.ipadd代表ip地址。x.x.x..x为子网掩码。例如给网卡eth0配置的ip地址为192.168.1.1 子网掩码为 255.255.255.0 。如下下图所
注意（此方法配置的ip地址后计算机从新启动将会失效）
（2）neat命令
Neat命令=redhat-config-network图形下配置ip地址
双击图下画红线的部分
双击划线部分后出现下图所示：根据要求配置相关信息
双击ok配置完毕。配置完后重启服务，并查看配置ip地址。
注意（此方法配置的ip地址后计算机从新启动仍然有效）
（3）netconfig命令
输入netconfig后将会出现下图所示，单击yes按钮。
进行相关配置后ok退出。
注意（此方法配置的ip地址后计算机从新启动仍然有效）
（4）vi /etc/sysconfig/network-scripts/ifcfg-ethx
配置完以后重启动服务.，p地址就配置好了。其实前面3个的配置方法最终还是改变了/etc/sysconfig/network-scripts/ifcfg-ethx下的配置文件罢了。
5. 常见的前端集成部署方案有哪些各自的优缺点是什么
前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般web团队需要用到的技术元素：
开发规范：包括开发、部署的目录规范，编码规范等。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。
组件化开发：在模块化基础上，以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护，组件单元是资源独立的，组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等，甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装，解决一些常见的组件渲染、交互问题。
组件仓库：有了组件化，我们希望将一些非常通用的组件放到一个公共的地方供团队共享，方便新项目复用，这个时候我们就需要引入一个组件仓库的东西，现在流行的组件库有bower、component等。团队发展到一定规模后，组件库的需求会变得非常强烈。
性能优化：这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富，就不在这里展开了，感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是性能优化一定是一个工程问题和统计问题，不能用工程手段保证的性能优化是不靠谱的，优化时只考虑一个页面的首次加载，不考虑全局在宏观统计上的优化提升也是片面的。
项目部署：部署按照现行业界的分工标准，虽然不是前端的工作范畴，但它对性能优化有直接的影响，包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
开发流程：完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本，工作这些年见过很多独立的系统（cms系统、静态资源推送系统）将开发流程割裂开，对前端开发的效率有严重的阻碍。
开发工具：这里说的工具不是指IDE，而是工程工具，包括构建与优化工具、开发-调试-部署等流程工具，以及组件库获取、提交等相关工具，甚至运营、文档、配置发布等平台工具。前端开发需要工具支持，这个问题的根本原因来自前端领域语言特性（未来我会单独写一篇文章介绍前端领域语言缺陷问题）。前端开发所使用的语言（js、css、html）以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统，要想把它们串联起来，才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响，因此能否串联其他技术要素，使得前端开发形成一个连贯可持续优化的开发体系，工具的设计至关重要。
6. 前端常用的框架有哪些
首先我想说明一下，我们通常说的js不是框架，是语言，即javascript，据最新世界编程语言排行榜来看，已经上升到了第7位，发展迅猛，其标准是ecmascript，现在基本上是基于ecmascript5。jquery是用js写的框架，其在dom操作上有很明显的优势，也是时下很常用的一个js框架。
至于之外还要学习那些框架呢？
如果你说的是js框架，建议先掌握好jquery，然后还有很多的，比如楼上提到的extjs，近几年比较流行的angularjs，基于移动端考虑的轻量级仿jquery框架zepto，还有jquery mobile，还有适合写后端或服务端的node，等等。
如果是web前端框架，就不仅仅是涉及的js了，还有html和css。个人觉得只有这三种语言都涉及到的框架才能说得上是web前端框架。现在比较火的是bootstrap，还有foundation，比较古老的有jqueryui，easyui等等，还有其他很多很多。如果还有算上处理方案及版本升级代码迭代等，就要用到网络团队研发的fis这种了。其实内容真的很多很多，前端任重而道远啊~
7. fis3和webpack有什么区别
fis/fis3是grunt、gulp之后兴起的一个比较优秀的前端工程解决方案。它的本质是基于静态资源标记+动态解析静态资源表，在模板、js里边使用特殊的标记方法引用前端资源，构建的时候生成一张资源依赖表，浏览器或者后端模板语言在解析的过程中通过查表得到某个静态资源在不同环境下的引用路径，所以不管是纯前端渲染（标记方法已经转换成浏览器能识别的了）还是后端（php、node、java）渲染，都很容易支持到，这样可以做到非常精细化的控制资源的按需加载。可以说fis真正做到了静态资源动态按需加载。
再来说说webpack，其实本质上是静态打包，生成chunk需要手动配置entry，虽然可以使用CommonsChunkPlugin、dll等插件辅助提取公共代码，以及采用code split切割进行懒加载，但这个粒度十分难把握，配置起来也比较困难（fis是自动生成依赖关系和自动处理懒加载）。
单从原理上来讲，fis比webpack要先进好多好多。但是fis先进的理念也成为它的一个缺陷，就是自定义的一套标记语言，大量自定义的资源标记语法并不能被浏览器直接接解析或者被社区流行的工具（browserify/babel）转换，比如fis依赖自家定制的mod.js来解析`require()`函数（即定位资源）以及资源base64内嵌语法`__include()`等。这一点直接导致了fis无法和后来的强大的npm社区对接，大量的npm前端模块在fis用不了，笔者认为这是导致各公司在选择前端统一的构建工具标准时不考虑fis的最大原因吧。
fis的作者
曾经说过，webpack只差一步——生成支持静态资源表，就完美了，深以为然！目前，webpack好像有生成sourcemap的插件，但是缺少配套的解析sourcemap的工具，后端的模板引擎貌似也没有支持sourcemap。
webpack现有的懒加载手段不完美，但是基本够用，主要是它直接支持commonjs规范的require语法，再配置babel等还可以直接解析ES6语法（当然，fis也可以通过插件支持ES6的），加上可以直接使用npm模块这一点，依托npm社区强大红利来搭建公司级公共组件化规范。所以综合考虑，webpack目前是前端构建工具的首选。
8. FIS —— 已经不再维护的前端构建系统
之前工作一直用到 FIS ， FIS2 和 FIS3 都有用过，现在只是把学习笔记放上来，因为手中实践的东西较多，之后有时间会进行下一步的整理。
FIS 是网络的前端团队出款的一种构建系统， FIS 现在也基本没有团队维护了，但是我们还需要了解一下他。相比于 grunt 和 gulp ， FIS 的核心特点是 高度集成 。
他把前端日常开发中常见的开发任务和构建任务都集成在了内部，这样开发者可以通过简单的配置文件的方式去配置我们构建过程需要的工作。我们不需要在 FIS 中像 grunt 和 gulp 一样定义任务， FIS 中有一些内置任务，内置任务会根据开发过程自动完成构建任务。 FIS 中也有用于调试的 web-server ，可以很方便的调试构建结果。
里面的引用资源也变成了绝对定位
使用 fis3 inspect 命令可以看到对哪些文件进行了操作
9. 前端工具里面gulp和fis，有哪些优缺点
fis 搭建过程相对繁琐，不过搭建好以后已经集成功能可以更加丰富，例如自带服务器环境等，还有一些网络独有的构建环节插件。
gulp和gruntjs配置和使用类似，主要使用npm仓库已有的插件进行封装，生态系统稳定，相对更开放一些。
我自己也开发了一款前端工具，功能可以看做是弱化的fis，但是也有很多独有的功能，非常适合初中级前端组成团队的使用，还自带了比nginx配置方便的代理配置功能。 你可以网络一下 f2e-server.