前端阶段性总结之「自动化和构建工具」
更新日期:
前端工具
开发环境
对于nodejs和npm的事情，还需要本骚年讲解的话，不合格重考了噢。
构建套件/工具
程序产生器
- Yaomen：可快速生产Angular/Backbone等所需的专门类别程式，以及单元测试程式(现在基本没啥人用了呢)
- git：Git只是代码管理工具，但是把写好的原型程式下载下来这样的事情，也可以当作程序产生器吧哈哈
- 各种框架自带的脚手架、CLI等等
依赖管理
- bower: 能自动下载安装CSS以及JS套件，并自动处理依赖性(Again，已经很少人用了)
- npm: nodejs用来下载以及安装依赖的工具
自动化工具
- Grunt: Task Runner，常用来执行JS/CSS打包压缩、编译、单元测试等工作
- Gulp：用来简化Grunt的设定，常用来监视+编译打包一系列连续整合工作
- Webpack：其实Webpack只是个模块化工具，但是很多时候我们会使用它完成以上Grunt/Gulp等能完成的工作，所以不小心被归类了
校验工具
- eslint/tslint：可在支持的编译器进行代码校验
- typescript：编译过程的强类型校验
测试工具
- Karma: 单元测试执行工具
- Mocha/Jasmine: js测试语言
测试相关的本骚年也没接触过，但除了单元测试之外，似乎还有自动化测试相关的，请小伙伴们自行查找。
- 调试工具
- 强大的浏览器：像Chrome等自带了强大的控制台，包括断点、sourcemap、http等功能
- Fiddler：主要用于抓包、代理等等，很方便的http调试工具
关于Grunt/Gulp/Webpack
以下摘自知乎网友-一波不是一波:
Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp/Grunt是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
说到browserify/webpack，那还要说到seajs/requirejs。这四个都是JS模块化的方案。
其中seajs/require是一种类型，是一种在线”编译” 模块的方案，相当于在页面上加载一个CMD/AMD解释器。这样浏览器就认识了define、exports、module这些东西。
browserify/webpack是另一种类型，是一个预编译模块的方案，相比于上面，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是AMD/CMD/ES6风格的模块化，它都能认识，并且编译成浏览器认识的JS。
Webpack
这里单独把webpack拉出来讲，其实只是因为骚年对其稍微有过些使用经验和总结而已。再说Webpcak可配置性这么棒，当然要多了解了解啦。
优秀的Webpack：
- 拆分依赖树（dependency tree）为多个按需加载的chunk
- 保证快速首屏加载
- 每种静态资源都可成为模块
- 能够将第三方库视作一个模块来处理
- 能够定制模块打包器的几乎任何部分
适合大型项目
webpack-dev-server
- webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
- webpack-dev-server主要提供两个功能：
- 为静态文件提供服务
- 自动刷新和热替换(HMR)
Webpack常用配置
- entry: 设置入口
- resolve: 配置文件后缀名(extensions)，除了js，还有jsx、coffee等等。alias配置项，可以为常用模块配置改属性，可以节省编译的搜索时间
- output: 配置输出文件的路径，文件名等
- module(loaders): 配置要使用的loader。把资源文件（css、图片、html等非js模块）处理成相应的js模块，然后其它的plugins才能对这些资源进行下一步处理
比如babel-loader可以把es6的文件转换成es5。大部分的对文件的处理的功能都是通过loader实现的。loader可以用来处理在入口文件中require的和其他方式引用进来的文件。
loader一般是一个独立的node模块，要单独安装。
- plugins: 顾名思义，就是配置要使用的插件。
- plugin是比loader功能更强大的插件，能使用更多的wepack api。
常用Loader
- less-loader, sass-loader: 处理样式
- url-loader, file-loader: 处理文件路径
- babel-loader，babel-preset-es2015，babel-preset-react: js处理，将最新特性的es6/es7语法编译成es5
- ts-loader：ts -> js代码编译，当然中间有类型检测的过程
- json-loader
常用Plugin
- CommonsChunkPlugin: 多个html共用一个js文件(chunk)
- UglifyJsPlugin: 压缩js
- DefinePlugin: 定义变量，一般用于开发环境log或者全局变量
- ProvidePlugin: 自动加载模块，当配置（$:’jquery’）例如当使用$时，自动加载jquery
- HtmlWebpackPlugin: 生成html
参考文章
Webpack的配置性很强大噢，而且相关的loader/plugin都很多很强大，其实现在的话，基本不需要grunt/gulp这些工具，单使用webpack就能实现整个项目的自动化构建、编译打包等等功能了呢。
结束语
对于层出不穷的工具，最好的态度是接受不抗拒。同时有空我们也可以多去了解和研究，毕竟一个新事物的出现和流行，总是有它自身的闪光之点呢。
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
码生艰难，写文不易，给我家猪囤点猫粮了喵~