大公司或专业团队目前流行的前端工具有什么？
下面这些东西在大公司可能不流行（你懂的，大公司喜欢自己造轮子），但绝对是专业前端需要了解的：
- Node.js：现代工业化前端的基础；
- RequireJS：AMD规范，即将过时的 JavaScript 模块化方案；
- Bower：前端模块源；
- npm；前端工具源，另一个潜在的前端模块源；
- Browserify：即将过时的基于 CommonJS 的前端模块化方案；
- Less：等 CSS 增强工具；
- Gulp：前端构建工具，如果你在前端开发中不需要使用类似工具的话，我只能呵呵；
未来的 JavaScript：ES6、ES7，兼容未来 JavaScript 模块化方案类库、代码转化类库等等。
- ECharts - 数据可视化图表库
- ESL - AMD Loader
- EDP - 前端开发平台
- EST - 基于 Less 的样式工具库
- Saber - 移动 SPA 项目解决方案
- Rider - 移动样式工具库
- ER - SPA 应用框架
- ESUI - UI 组件库
- ETpl - 灵活、高性能的模板引擎
- iSlider - 轻量、高性能的移动滑动方案
- 图说 - 可视化数据分享平台
- Fontmin - 字体子集化方案
链接：https://www.zhihu.com/question/28638304/answer/42021247
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
就具体的工作、开发框架或库，上面的都列举得差不多了，就不重复大家的，咱来一个前端开发方面理论层面的东西，从理论层面来反推，前端都要学习些什么技术，这也算是个人对于前端这个工种的粗浅见解吧，欢迎吐槽，别扔鸡蛋~~
这个疑惑是大多数前端开发入门的困扰。。。说实在的，和后端相比，前端的知识体系太杂了，以至于很多入门者找不到方向。其实，前端既要宽度，也要深度，优秀的前端开发人员比后端开发人员难培养多了。
1，兴趣是最好的老师
学习前端，或者说(ˇˍˇ）， 玩代码这一行，要玩得有深度，最基本也是最重要的，要自己有兴趣，没有兴趣就不要浪费时间了。虽然这是废话，但是当你碰到了技术发展的瓶颈期了，我觉得就应该能很比较好地理解这句废话的含义。
2，找一个好的导师
找一个愿意传授知识的导师，或找一个有大牛存在的团队，这是提高技能的最好也是最快的途径。如果什么都是自己研究，天赋异禀，或许会比别人快，但有一个人在关键时刻提点你，效果其实是非常显著的，突飞猛进指日可待。
说白了，你要和牛人一起干过活，知道大牛长什么模样的。
当然，在大中型项目中，大牛比较多，但这个对于入门者来说，如果你进入不了大中型项目，那么也可以在很多创业项目中物色，特别是电商领域等热门的、竞争激烈的领域，前端这一块至少需要一两只大牛来做前端架构和开发模式选型，能承担这样子角色的人选，一般都算是比较厉害的了。
竞争激烈的领域，如果连交互体验都不重视，那么这种项目绝对是没有成功的机会滴。
不同level，前端需要的技能分析
1，初级入门
html和css，这两个基本功。合理的html结构，很多时候可以减少js逻辑、css样式，以及避免绝多数的兼容性问题。基本功不好，到了一定程度会限制你往后发展的空间。
这一层面会涉及photoshop、美术方面的相关知识，而交互方面，大多数WEB需求是在jQuery或Zepto这样的库下进行的，会这两个库基本能够入门了。
2，中高级前端
初中级前端对于原生js开发能力的要求并不是很迫切，但是如果到了高级前端，就需要对js原生层面的API、属性以及不同浏览器的特性，都要有较深的了解了。
这一层面的前端，我个人认为必须深刻理解几个知识点：js的闭包、作用域以及类。熟练掌握几种js类的定义以及继承的方法，了解它们之间的差异，并能结合实际需求，在开发生产应用上。这其实就是具备面良好的向对象编程的编程开发思维了。
此外，中高级的前端必须掌握CMD或AMD的模块化方案中的一种，还掌握至少一个MVC或MVVM框架，能胜任比如OPOA页面，又如tmall、唯品会等电商网站的侧边工具条、提交订单等交互功能复杂的开发需求。
在这个级别的前端，我觉得，才好称之为程序员，和后端的开发一样，都是码农了。对于入门的，只要求会切图，写简单脚本或整合个jQuery插件来完成任务的，在我看来，还不能算是一个程序员。
3、前端leader
之前都是说技术的，而leader角色其实除了开发技能外，可能还需要一些管理方面的经验或能力。
在这个层面，不同的团队可能不一样，有偏技术的，有重管理的，但我个人认为，如果要底下的开发人员服你，至少代码层面的功力不能少，要不你无法做好代码review，保障整个团队是按照规范来执行得，有问题的时候需要leader快速定位问题，提供解决方案或解决思维。
小结，一个优秀的前端leader，我认为应该具备的能力：
①重要功能或需求的开发，或提供解决方案，做技术选型 ---> 技术功底
②需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调 ---> 沟通能力，具备产品思维，前端转型做产品不在少数
③开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧 ---> 项目管理能力
④前端开发规范，开发文档、开发标准的建立和实施，关键是实施 ---> 文档功力和执行力
⑤新员工的培训、辅导 ---> 做老师的能力
⑥前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备 --->行业观察能力
……
⑦不能太宅。这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？
4，前端架构师
是的，前端也需要架构！
前端leader，或高级前端开发不就是了？可能是，但架构是一个系统性层面的东西，能做好前端管理，未必能做好架构，当然，做好前端架构了，未必就能做好前端团队的管理。
当然，这是两个层面的东西，也没所谓谁更高大上。
好吧。还是聊聊架构师这玩意吧，因为做架构要涵盖的前端方面方面，还包括一些后端的东西。听起来，还是挺高大上的。
现在的前端已经不再是刀耕火种的年代了，在整个web开发生产流水线上，可能一些企业网站还可能属于附属或边角的工作，就是干php的顺手也可以弄一下的那种，但是，但凡有点追求的，重视前端体验的项目，前端必须是专业人士来干的，前后端分离开发也是必须的。
如何实现前后端分离？为什么要实施前后端分离？这方面的知识，似乎不是这个主题的范畴了。我就不说了，这里主要是给前端架构师，这个细分工种，给出我个人的见解。
首先，在我看来，前端架构要解决三个层面上的问题：
①团队开发协作层面的——根据项目的情况，设定一套符合项目实际需求的，能够解决前端团队多人协作开发、代码模块化组织的开发架构或模式，减少前端开发的边际工作，方便开发人员把绝大多数精力专注于业务逻辑的本身实现。也就是，前端生产的工程化和发布的自动化。
②业务需求实现层面的——根据业务需求，设定或整合一套符合业务需求的，能够解决绝大多数业务场景的基础上，保持好良好的可扩展性以及良好的可维护性的Javascript框架或方案。
③除了解决前端自身开发的两个层面问题外，还可能协同后端架构师，确定前后端对接的API，定一套符合项目需求的RESTful方案，并整合到前端框架中，最终形成一套数据封装的js API，如果项目有采用MVVM框架的，最好是能结合Model，以便view视图的控制。
当然，对于前后端交集的部分，比如服务端view模板层的一些东西，可能也需要前端架构师提供一个合理的架构或方案，哪些东西是公共的，可继承或复用的，该抽象出来的。。。这在PHP项目中是必不可少。
当然，这个工作可能是前端Leader来干也合适的。
或墨水有限，或眼界有限，对于前端架构师这个工种的表述不是很到位的，欢迎补充。
举个例子吧，然后我再对前端架构师要干的活做一个小结。
以阿里巴巴为例，淘宝、天猫、一淘等平台，都是基于kissy框架以及基于kissy开发的模块，这是根据阿里巴巴复杂多变的业务需求，在多次迭代后形成的，几乎你想要的前端功能它都包含，底层的基础工具函数，表现层的业务实现代码，甚至标准模板都有的，如果把所有功能都打包，这个框架就很大，实际生产时不可能这么干，对吧？
没关系，它本身是模块化，可以按需请求。但这还需要结合在Combo技术和CDN技术，这其实是阿里前端的核心技术，这里也有些相关的介绍：
前端优化：淘宝的Combo Handler和新浪微博的link标签includes属性
模块化高扩展性的前端框架 KISSY
小结： 如果项目中要用上类似kissy这样的框架，到底涉及多少前端架构相关的技术：
1、前端自动化工程化——nodeJS/grunt /gulp
2、前端模块化——CMD或AMD，kissy是CMD，也就是seaJS，CMD就是阿里自己弄出来的标准
3、前端发布代码增量发布系统——git是必须的，NodeJS Express框架的自动化或可视化的发布界面
4、前端按需加载——在线Combo，CND缓存技术，这里的核心，我认为是解决js模块依赖分析以及CDN的强缓存问题
5、前后端数据交互——RESTful、模板控制系统（tmall内部好像是TMS系统），前端主导业务系统的API规范
6、前端开发环境的一些相关问题，这个因为前端开发比较零碎，边际工作多，提高开发体验和提高开发迭代速度，很多基础性工作，比如开发环境，数据模拟系统，等都是前端架构师要考虑的事情
当然，kissy很强大，但并不一定适合每个项目，所以架构师要做的事情要对技术做好选型，如果时间允许，架构师不妨考虑自己造一个轮子，但项目的时间规划上不允许，不是要你自己造一个轮子，而是整合各种资源，形成一套能快速用于实战的整合套餐。
比如，蘑菇街的前端开发框架就是一盘整合的套餐——requirejs+jquery+backbone+一套自定义的底层库+各种插件+在线combo
如果要了解大公司的前端是怎样的，或者别人是怎么做的，可以看这里的视频，——D2前端技术论坛——2014绽放丨章节
有不少底料，前端开发理念层面的东西比较多。当然，前提是你都看明白了，如果都理解别人的做法，我想，你距离大牛也就不远了吧。
题外话：在线combo和本地combo
在阿里和蘑菇街两个电商上，都用了在线Combo，说明这确实是一个前端非常重要的技术，模仿阿里前端资源在线combo的服务，咱用coffeescript也写了个在线combo的服务，基于node 的Express框架，有兴趣可以参考一下
https://github.com/lmtdit/static-combo
而本地化的Combo机制，生产代码在本地build好之后，再发布到第三方的CDN上，这种可能会比较实际，但也要解决好CSS和JS模块开发和生产混淆压缩以及静态资源的缓存问题。
链接：https://www.zhihu.com/question/28638304/answer/41851544
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
意识流写一下，一个前端工程师应该知道的工具：
1. 模块化
很多人还在用requirejs和seajs，个人认为这种模块加载方式相当dirty，在配置、打包、编码都异常浪费生命。只推荐用Substack大神的browserify。可以和nodejs一样的方式组织模块，并且可以直接require npm上的模块，如果你后端是nodejs的话，连一些前后端模块都可以共用了。
2. 模版引擎
handlebars, artTemplate, jade, 都可以用用。（不要告诉我你把HTML写在JS里面
个人一般用handlebars或者artTemplate
3. 预编译器
CSS：Less、Sass、Stylus，用和HTML树状结构组织你的样式，
JS：CoffeeScript、LiveScript、TypeScript
个人一般用Sass + CoffeeScript，写少很多括号可以延长生命值。LiveScript则是做的有点太过了，牺牲了一些可读性。TypeScript括号太多。
4. 工作流
Grunt、Gulp、Makefile、Npm、Shell、Python、NodeJS
看到很多人说到前端自动化工作流只会用想到Grunt、Gulp什么的，其实自动化工作流这个东西不能受限于工具。很多项目的业务流程都不一样，需要有不一样的工作流。需要我们灵活组织和构建工作流，如果有声称银弹一样的工具一定是骗人的。
有时候为了构建项目的工作流你甚至需要用到很多不一样的语言，因为每一种工具的所擅长的领域不一样。例如你编译要用到Grunt、Gulp，git分支操作你要用到Shell可能会比较方便。我们曾经就试过为了简化工作流，把makefile，shell，grunt，python，nodejs构建了一个一条命令编译、测试、发布、部署的工作流。
个人一般用makefile当入口，在makfile中调用不同类型的脚本进行工作流的糅合。
5. 版本管理
git
要学会怎么把git的分支管理用得出神入化。使用git和github进行协同开发流程
7. 分析与设计
UML：时序图、活动图、用例图等。
一开始只写代码不会做系统分析和设计的都是流氓。
8. 事件机制
用事件机制来解耦前端模块是必备技能。用好eventemitter2这个库。
9. TDD、BDD
Mocha、Jasmine、Chaijs、ShouldJS、SinonJS
学会做前端测试，让你的程序的撸棒性更强。
10. 组件化思想
这里没有特定的工具，只需要知道，在一个做一个比较复杂的前端应用的时候，需要学会构建你前端应用的组件化体系。让你的程序scale out而不是scale up。
一个大的应用程序其实都可以break成很多小的应用程序，也就是所谓的组件，每个组件有自己单独的内容和结构（HTML），样式（CSS），和逻辑（JS）。组件之间有组合关系、嵌套关系，组件之间的通信，都需要学会如何实现和构建。
11. 函数式编程库
lo-dash、underscore
12. MVC、MVVM思想
========================== 碉堡了的分割线 =======================我没有把jQuery、AngularJS、EmberJS、Knockout、Backbone、ReactJS这些比较流行的库、框架加上去。我认为这些工具都是有特定的应用场景的，而有些人会把它们其中一个当作是银弹，什么情况都用某一个工具。我认为前端最重要的一个思想就是：根据应用场景组合不同的工具构建最合适的架构、工作流。能掌握上面的内容基本妥妥的的。
链接：https://www.zhihu.com/question/28638304/answer/41837522
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
简评一下业界常用的并且我了解的一些前端工具
编辑器：
首推：VIM、Brackets
可选：atom、sublime、emacs
webstorm 那叫 IDE，不（仅仅）是编辑器
css工具：
苦于合作的同事一直选的是 bootstrap，我没有认真比较过 sass 与 less 而直接一路用着 less，不过两者其实差不了多少。
现在貌似流行后处理器了（前面说的两个叫预处理器，我也不知道他们差别在哪），autoprefixer 等，推荐看 Pleeease 这是一个这类工具的集合
模块化工具：
首推：browserify 代码架构清晰，你可以自己拔插其中的某些部分，比如替换个 prelude（在浏览器里怎么加载模块的代码，默认是每个编译合并后的 js 都带一小段），或者用诸如 factor-bundle 这样的插件拎出共用组建来。因为架构清晰代码量小，你可以通读源码了解其原理。
其次：webpack，不得不说 webpack 很强大，如果要用 react 的话 react-hot-loader 这样的插件目前只此一家。对我来说它的问题在于太庞大了，我无法理清其全貌怕用在项目里踩坑自己无法解决。
不推荐：require.js sea.js，两个都是要过时的东西，在我还没成为 sea.js 黑前，就是坚定的 require.js 黑了。两者的共同问题是要为每个文件写首尾的 wrapper 在浏览器端去解决，而不是像前两者在开发部署阶段去处理，require.js 问题最大，好歹 sea.js 还和 node.js 有所兼容。
流程工具/部署前处理：
部署前处理主要包括用前面的模块化工具打包、生成版本号、压缩文件等。我主要用 gulp 来做这些事，从来都不会用也不喜欢 grunt，百度的 FIS 听说过但不了解，读过
如果你用熟了 gulp，你可能会厌倦开工一个项目就想切个页面也要摆好排场写个几十上百行的 gulpfile.js，这时你应该做减法，可以向 substack 学学用 npm run （package.json 里面的 scripts 属性）或者像./task.js 这样的几行代码即可。
包管理：
bower：用 github 来做源，国内使用很不堪，如