胖蔡说技术前端技术随着日益成熟的开发框架(React、Vue、Angular)的流行,如何去管理、构建前端项目也就显得尤其重要。目前市面上较为常用的构建工具就是Webpack。本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。除了webpack以外，前端其实还有很多比较优秀的构建工具，适用于不同的开发场景。如：Gulp、Grunt、FIS、Rollup、Parcel、Yeoman6、Athena、WeFlow、Cooking等。
什么是构建工具？
构建工具在开发中是一个很特殊的存在，它不影响代码逻辑、业务，当大多情况下是不可或缺的角色。从定义上看：构建工具是一个把源代码生成可执行应用程序的过程自动化的程序，如gcc将.c生成为.a、.o文件、javac将.java文件生成为.class文件、gradle将项目工程生成为.apk文件等等诸如此类。如上所说的gcc、javac、gradle都是相对流程的一个构建工具。
为什么要用构建工具？
了解了什么是构建工具后，接下来需要了解的是既然构架工具并不对结果负责，那么我们为什么要使用构建工具呢？其实理由很现实，就是减负，减轻开发者负担，让开发这不需要将过多的精力用于管理包、包版本、压缩等与业务不相干的工作，而且当项目越来越大，人力也无法负担如此巨大的工作。
构建工具能做哪些事？
说了构建工具的重要性，接下来需要说的是构建工具具体能帮我们做哪些工作：
- 依赖管理(下载和版本维护)
- 生成目标运行文件并不影响源代码
- 版本发布
- 单元测试
在前端中构建工具对应的具体需要帮我们实现的如下:
- 转换ES6语法
- 转换框架的语法糖 如 JSX, VUE文件
- CSS 前缀补全/预处理器
- 压缩混淆
- 图片压缩
- 代码分割
- 模块合并
- 代码校验
- 自动发布
前端构建工具
说完了构建工具的功能，接下来需要了解在前端开发中具体有哪些构建工具，我们可以通过工具的类型，将构建工具分为：
- 模块化打包类型
- 任务流构建类型
- 集合型工具类
常见的而模块化打包类型构建工具如:webpack、Rollup、Browserify。任务流类型的有：Gulp、Grunt。集合型的主要包括：Yeoman、FIS、jdf、Athena、cooking、weflow。就目前来看用的较多的是属于第一、第二类型的构建工具。
前端常用构建工具
webpack
Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。Webpack的优点是：
– 模块化处理项目- Plugin 扩展- 使用场景不仅限于 Web 开发- 社区活跃，能为大多数场景找到已有的开源扩展
Grunt
Grunt的出现早于Gulp，Gulp是后起之秀。他们的本质都是通过 JavaScript 语法实现了shell script 命令的一些功能。 Grunt是一个任务执行者，有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件 Gruntfile.js 里，如下配置文件：
// Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
// js格式检查任务
jshint: {
src: 'src/test.js'
}
// 代码压缩打包任务
uglify: {}
});
// 导入任务插件
grunt.loadnpmTasks('grunt-contrib-uglify');
// 注册自定义任务, 如果有多个任务可以添加到数组中
grunt.regusterTask('default', ['jshint'])
Gulp
Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。通过配置gulpfile.js文件来实现，一个简单的gulpfile.js配置如下:
// gulpfile.js
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
// 代码检查任务 gulp 采取了pipe 方法，用流的方法直接往下传递
gulp.task('lint', function() {
return gulp.src('src/test.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 压缩代码任务
gulp.task('compress'， function() {
return gulp.src('src/test.js')
.pipe(uglify())
.pipe(gulp.dest('build'));
});
// 将代码检查和压缩组合，新建一个任务
gulp.task('default', ['lint', 'compress']);
推荐阅读
