寸志，前端工程师
下面这些东西在大公司可能不流行（你懂的，大公司喜欢自己造轮子），但绝对是专业前端需要了解的：
- Node.js：现代工业化前端的基础；
- RequireJS：AMD规范，即将过时的 JavaScript 模块化方案；
- Bower：前端模块源；
- npm；前端工具源，另一个潜在的前端模块源；
- Browserify：即将过时的基于 CommonJS 的前端模块化方案；
- Less：等 CSS 增强工具；
- Gulp：前端构建工具，如果你在前端开发中不需要使用类似工具的话，我只能呵呵；
未来的 JavaScript：ES6、ES7，兼容未来 JavaScript 模块化方案类库、代码转化类库等等。
编辑于 昨天 19:58 15
条评论 感谢 分享 收藏 ? 没有帮助 ?
举报
赞同10
反对，不会显示你的姓名
安而遇，喜欢js是因为它继成自lisp
的那一部分
百度FIS
赞同3
反对，不会显示你的姓名
小爝，http://www.tuer.me
工具框架都是为业务提供支持的，更好，更快，更舒服。
知道自己需要什么，再去看对应的工具，体会和理解会更好。
日常工作 我用的工具大部分都是自己写的。库，插件，用的多了，只是懒的自己写的时候会网上随便找找。
可能我很土，对其他楼主所说的新东西不甚了解。并不是因为不知道，而是知道后，觉得对自己目前工作没啥用。没去深入看完。
我反对什么都学，把精力留在深度上更好一点。而一些标准也都是人之所为。
需要就用，不足就改，没有就造。我对前端工具的看法。
工具只是手段啊，哪有什么流行不流行，更谈不上过时。
赞同26
反对，不会显示你的姓名
安动生undoZen，安以动之徐生
简评一下业界常用的并且我了解的一些前端工具
编辑器：
首推：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 听说过但不了解，读过 @张云龙 的文章推测应该还不错。我的建议是@张云龙 的文章必读而
FIS 可参考，最后用 gulp 来组织自己的工作流。
如果你用熟了 gulp，你可能会厌倦开工一个项目就想切个页面也要摆好排场写个几十上百行的 gulpfile.js，这时你应该做减法，可以向 substack 学学用 npm run （package.json 里面的 scripts 属性）或者像 ./task.js 这样的几行代码即可。
包管理：
bower：用 github 来做源，国内使用很不堪，如 @yhben 的回复“100k的js，克隆了一个50M的项目”。它可能简化了一点点你去 github 上搜索代码下载保存的工作，但被要下载全库这个缺点抵消了，对于依赖管理，我觉得他真没做多少事。
npm：我是无论前端后端甚至 css 都用 npm 的，公司里也用 @苏千 和 @死马 的
cnpm.org 搭了一个私有库在用，个人觉得这个工具一定得掌握好，不然你就自绝于当今前端开发的主流了。
赞同2
反对，不会显示你的姓名
苏洋，我有一只八岁的博客 http://www.soulteary.com
唉，看了一圈，没人回答持续集成和在线接口/在线工具相关的东西。
- Gitlab Ci
- 代理工具/在线代理工具/HOSTS管理工具/...
- Mock接口服务/本地Mock工具
- ICON FONT
- 图片上传和在线优化/图片优化工具
- 错误追踪
- DPL + JS TOOLKIT
- ...
赞同3
反对，不会显示你的姓名
kerry，Listen
to Your Heart, Follow Your Dream.
堇年、董航、安动生undoZen 赞同
browserify+npm搭建模块化体系，并通过browserify的transform机制，做一切静态分析下你想到的能做的事情，AST修改给你足够的想像空间带你飞～
手机码字，改天补充…
赞同3
反对，不会显示你的姓名
董航，我是一朵云，飘啊飘！
说说我们猎豹移动广研前端团队的一些实践方案：
工作流：
Grunt。如果你喜欢Gulp，也没问题。但是我更喜欢Grunt的写法。
模块化管理：
完全基于CMD规范，使用browserify组织代码。至于有人喜欢ES6模块或者AMD的方案，可以利用相应转换工具转换为CMD。我们的CSS代码、JS代码、HTML代码都是用require方式引入的(自己实现的插件)。异步加载代码，也有browserify插件实现，可以实现按需加载(自己实现的插件)。我们会对引入的任何代码进行cache bust（自己实现的插件）。以上3个browserify插件未来会进行开源。
样式：
因为产品需求差异比较大，样式都是自己写了。stylus + nib，用过的都说好！
前端框架：
分具体使用场景：
（1）内部管理系统extjs、Angular、React etc.我们鼓励在内部或者重要程度比较低的项目中，使用一些新的、热的或者前沿的技术；
（2）移动Web，基础库zepto。PC Web，基础库jQuery；
（3）小项目、活动页面，通常没有架构而言。大型项目，基本除了基础库，都会有个自己的业务框架；当然我们也有有些公用组件的沉淀；
（4）复杂的PC Web APP中，使用knockout做MVVM和knockout模块组织代码；knockout这东西好啊，大小合适，兼容性好，还支持组件化开发；
质量保障：
项目比较杂，暂时没有引入专业测试工具，主要是3点：
（1）自己编写的小的测试模块，做成工作流中的一部分，构建时就能发现一些低级错误（类似JSLINT）；
（2）JS代码执行错误、AJAX质量、PVUV等的数据上报和统计；
（3）运维侧的各种监控工具；
前后端分离：
God Bless，我们大多数项目都是非展示型页面。对首页加载速度没有过多要求，所以我们通常都是前后端完全分离，即全部使用AJAX交换数据，即使是首屏。
赞同2
反对，不会显示你的姓名
偏右，资浅前端工程师
看看 http://npmjs.org/#explicit 首屏的推荐的这些工具，基本上都在这儿了。
赞同4
反对，不会显示你的姓名
eisneim，Web
Dev,Designer,Bodybuilder,创业中
我们是创业小团队，我们的前端是：老师客户管理端 angular 1.3 -> angular-marterial -> gulp +bower 学生使用产品web端(以手机端为主，自适应页面将会与手机app原生的混合) : React + Flux + react-router + browserify + gulp +bower ；后端nodejs为主，以后准备逐渐往golang转；
-----------------------------------
广招天下豪杰加入我们，目前就我一个前端（累趴。。。）拉勾链接：新瓶子招聘-英芝教育科技（上海）有限公司招聘
赞同8
反对，不会显示你的姓名
Johnny
Wu，Fireball-x 主设计师
我看到答案里多数是一些框架, 库和 CLI 工具, 比较针对编码, 但是前端还有一些偏设计的工作要做呀.
IDE, 可视化工具
- WebStorm: 公司里其他人用, 我虽然是坚定的 exVim 使用者, 但是有些心动.
- DevTools: 这个我想是个前端都要用吧, 但是 DevTools 里有很多细小的功能点, 建议通读文档使用.
- Adobe Edge: Edge 可以帮你做一些小的动画预览, 有时缺灵感就用它预演一下, 比你写动画 key 方便很多
- Macaw, Webflow: 这两个都是用于页面排版的, 主要也是为了让自己看一下效果, 特别是整体界面排版.
- Sketch: 我用的少, 就不多评论了, 和上面两个的作用类似.
- Unity3D: 有时要写点 shader, 调些动画什么的, 短时间内还是得靠他.
CLI 工具
- Gulp: 现在大部分的工作流程都依赖他, 我们连代码更新都写成 `gulp update` 了....
- Git: 就不用多说了.
- Bower: 我个人用的蛮多的, 比较省心.
- nodemon: 开小服务测试方便.
赞同1
反对，不会显示你的姓名
戴彬，http://frankdai.com
栾天昊 赞同
学好Native Javascript 自己找个库 用自己的代码模拟实现一下 回头再看别的库 so easy
赞同0
反对，不会显示你的姓名
布拿拿Lee，做一个低调的Lisp脑残粉
其实在公司的时候我一直在尝试前端模块化，因为一个人写前端写后台还是很累的，然后有时候又不想去麻烦大老板写，毕竟大老板很忙的，后台模块了，前台仔细一看惨不忍睹，好吧，大学生水平。大半年来做了的几个项目css框架用过一些，我承认手写代码比Dreamweaver好了很多，但是仔细一看，和业界标准还是差了很多的嘛。
———————————————————————————————————————————
Gulp
这个东西很好用。
我在里面
var gulp = require(‘gulp‘),
coffee = require(‘gulp-coffee‘),
gutil = require(‘gulp-util‘),
uglify = require(‘gulp-uglify‘),
imagemin = require(‘gulp-imagemin‘),
cache = require(‘gulp-cache‘),
sass = require(‘gulp-ruby-sass‘),
autoprefixer = require(‘gulp-autoprefixer‘),
minifycss = require(‘gulp-minify-css‘),
rename = require(‘gulp-rename‘);
var tinylr;
gulp.task(‘livereload‘, function() {
console.log("hi tiny lr");
tinylr = require(‘tiny-lr‘)();
tinylr.listen(4002);
});
大概放了这些东西。
反正我最喜欢的时live reload了，你保存的时候就帮你编译，乱七八的做一些操作，然后帮您刷新浏览器，写起来还是很顺畅的。这个在express里面在监听一个端口就好了。
写Rails的时候我用的时guard 然后浏览器装一个插件做live reload的。
框架也接触过一些，boot，foundation，还有妹子。不过还是最喜欢pure。小而美。
bower到现在并没有用这个的习惯。主要是网速实在是。。。
包括不用Grunt，Yeoman也是这个原因。
当然不用Grunt，是我觉得Gulp会看起来简单点。
然后Emmet这个插件很好用的。
赞同0
反对，不会显示你的姓名
李文富，js
css html
spm
赞同5
反对，不会显示你的姓名
张立鑫，专注互联网
好吧，本来不想回答的，从知乎公测到现在都是潜水的，有些惭愧。
先说几点现实的问题：
- 如果你不是项目的leader你完全不必要关心这些，也左右不了。
- 如果你只是以学习为目的而不是为了找工作比较符合大公司的胃口，那么你应该将大家推荐的和提及的都去用一用，最少要看懂文档，知道他们是干什么的。在使用的的过程中你才能知道哪些更适合你，更适合团队。再深入一些，哪些虽然适合团队，但是却不利于优化。要清楚，前端对文件大小和连接数是很敏感的，比如browserify在组织代码、前后端公用／模糊前后端界限、学习成本（只要会nodejs）方面效果显著，但是由于需要mock nodejs环境，体积会比其他单纯的module
loader大出许多，连接数也会高许多，所以在前端优化过程中优化程度有所下降。如果你没有深入的去学习实践，那么你可能就会对单纯的module loader有所误解，现在的module loader几乎都支持CJS（nodejs／CommonJS）的写法，打包时会自动转换成loader的API。 - 如果你想以找工作对公司胃口为目的，很不幸，大公司都喜欢自己造轮子，会有人告诉你怎么让这些轮子动起来。
- 现在大多数前端工具都是nodejs所写，所以学会nodejs很重要，其他基于nodejs的工具都很好懂
- 如果你想学习前端知识，那大公司使用什么工具跟你有啥关系？反正你都要学的！
- 工具提升效率也增加学习／培训成本。
- 不要过于相信、依赖我们所说的，大部分是我们自己的实践经验，这些经验可以分享出来，但不一定适合你，适合你的团队。
至于工具，大家也都说的差不多了，我也想说几点：
- 大家所说的，务必要亲自去弄清楚是干嘛的，有些只是片面经验，或许只用到了工具的一部分就认为是工具的全部。
- 大而全的工具在构建和组织代码上很好很强大，但在前端展示与优化上不一定好，甚至会拖累。
- 有些时候工具也会造成负担，当你真正需要他们的时候再去用。就像module loader的出现是因为项目js大而并不会一次性全部用到；项目太大打包发布麻烦，所以出现了grunt／Gulp。
- 在国内，你要知道如何使用梯子，比如google，github，npm，bower，没有梯子再多的工具你都会感觉很难受，真的。
这里我没有推荐任何工具，因为我觉得这个问题有些笼统（工具有很多领域负责不同需求），如果你真的需要的时候你就会去找某一方面的工具，而不是为了会用工具而去学习工具。
赞同0
反对，不会显示你的姓名
戴嘉华，FML
先占个坑先
赞同0
反对，不会显示你的姓名
Vins0n，SE/粤语/互联网
Twitter的bootstrap和国产的amaze ui？
匿名用户
说说我们用的东西吧
前端：
require.js
grunt or glup
coffeescript jade sass less
css框架:
bootstrap senmantic
其他组:
angular React等
后端：
Python Go Ruby等
赞同0
反对，不会显示你的姓名
Fula
Li
懂node后就能自己写很多小工具了，集成起来走个流程就算是自定义框架了，其实很多前端框架没ant好用，xml比json好写，就是维护配置比较麻烦。