前端工作流全解析

随着 web 应用越来越复杂，项目的结构和代码量也变的愈加庞大，前端人员越来越需要在工程化的层面提高开发效率，前端开发是一个飞速发展的领域，市面上现在有各种各样的工具来辅助我们开发，比如说我们在开发过程中就可能会用到下面这些工具：

1.包管理器 npm
我们在开发项目的过程中，会引入各种各样的依赖，比如说：

JS 框架：react
CSS 框架：Semantic-UI,Bootstrap
如果你的代码风格偏向函数式编程，你可能会用到 Lodash 或者 underscore
如果你的项目涉及到数据交互，你还需要 Axios 来帮你发起ajax 或者 http 请求
如果这些依赖在开发的过程中一个一个的去网站下载一定会很麻烦，所以我们需要一个工具来帮助我们安装这些依赖，这个工具就是包管理器。

管理器在帮助我们安装项目依赖的时候，也会帮助我们安装包的依赖，比如说包管理器在安装 Semantic-UI 的时候，发现 Semantic-UI 使用到了 jQuery，那么包管理器就会帮助我们安装 jQuery 。我们会使用到的包管理器是 npm。

npm不仅可以帮助我们安装包，也能够帮助我们更新、卸载和分析包。

2.任务流工具Grunt 和 Gulp
但是仅有包管理器还是不够的，比如你在项目开展的过程中要进行代码检查，编译SCSS文件，合并Sprite图片，压缩合并代码，这些一个一个的动作我们叫做任务，这些任务是一个接着一个执行的，我们把它叫做任务流，帮我们做任务流的工具，我们叫做任务流工具。

Grunt 和 Gulp就是任务流工具，但是任务流工具没办法帮助我们支撑模块化开发，随着 commonJS 和 ES6 的出现，模块化开发在前端有了越来越多的实践。

3.模块打包器 webpack
但是在目前浏览器环境代码滑块化还是无法使用，所以如果有一个工具能够让我们在开发的时候使用标准的模块化语法，而上线的时候有帮助我们对代码进行编译转换合并成单个文件让浏览器来运行，这个工具我们把它叫做模块打包器。

事实上 webpack 不仅仅帮助我们打包文件，他还会做一些任务流工具做的工作，比如说编译文件，代码检查。

4.生产依赖和开发依赖
生产依赖
JS 框架：react
CSS 框架：Semantic-UI,Bootstrap
如果你的代码风格偏向函数式编程，你可能会用到 Lodash 或者 underscore
如果你的项目涉及到数据交互，你还需要 Axios 来帮你发起ajax 或者 http 请求
开发依赖
模块打包器 webpack
任务流工具 gulp
如何区分开发依赖和生产依赖？
当你的项目放到浏览器端去运行的时候你还需要它吗？如果需要那它就是生产依赖，反之则是开发依赖。