大公司或专业团队用什么前端工具？以及各个前端自动化工具教程

下面这些东西在大公司可能不流行（你懂的，大公司喜欢自己造轮子），但绝对是专业前端需要了解的：

• Node.js：现代工业化前端的基础；
  
• RequireJS：AMD规范，即将过时的 JavaScript 模块化方案；
  
• Bower：前端模块源；
  
• npm；前端工具源，另一个潜在的前端模块源；
  
• Browserify：即将过时的基于 CommonJS 的前端模块化方案；
  
• Less：等 CSS 增强工具；
  
• Gulp：前端构建工具，如果你在前端开发中不需要使用类似工具的话，我只能呵呵；
  

未来的 JavaScript：ES6、ES7，兼容未来 JavaScript 模块化方案类库、代码转化类库等等。

作者：寸志

来源：知乎

-----------------------------------------------------------------------------------------------------------------------------------------

简评一下业界常用的并且我了解的一些前端工具



css工具：

苦于合作的同事一直选的是 bootstrap，我没有认真比较过 sass 与 less 而直接一路用着 less，不过两者其实差不了多少。
现在貌似流行后处理器了（前面说的两个叫预处理器，我也不知道他们差别在哪），autoprefixer 等，推荐看 Pleeease 这是一个这类工具的集合

我的另一篇文章 讲解 @media 媒体查询大法：@media是什么？css3 @media媒体查询器用法

模块化工具：

首推：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 搭了一个私有库在用，个人觉得这个工具一定得掌握好，不然你就自绝于当今前端开发的主流了。

----------------------------------------------------------------------------------------------------------------------------------

Gulp 自动构建 最简洁易懂的教程，没有之一

前端构建大法 Gulp 系列 (一)：为什么需要前端构建