前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理，将文件或资源处理成需要的最佳输出结构和形式。

　　在处理过程中，我们可以对文件进行模块化引入、依赖分析、资源合并、压缩优化、文件嵌入、路径替换、生成资源包等多种操作，这样就能完成很多原本需要手动完成的事情，极大地提高开发效率。

一、Gulp

　　Gulp 是一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文件。Gulp 被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：

  • 通过 gulp.task 注册一个任务；
  • 通过 gulp.run 执行任务；
  • 通过 gulp.watch 监听文件变化；
  • 通过 gulp.src 读取文件；
  • 通过 gulp.dest 写完文件。

Gulp 最大的特点是引入了流的概念，同时提供了一系列常用插件去处理流，流可以在插件之间传递，大致使用如下：

// 引入 Gulp
var gulp = require("gulp");
// 引入插件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
....
// 新建SCSS任务
gulp.task('scss', function() {
    // 读取文件，通过管道喂给插件
    gulp.src('./scss/*.scss')
        // SCSS 插件将 scss 文件编译成 css
        .piple(sass())
        // 输出文件
        .piple(guilp.dest('./css'));
});
// 合并压缩 JavaScript 文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .piple(concat('all.js'))
        .piple(uglify())
        .piple(gulp.dest('./dest'));
});
// 监听文件变化
gulp.task('watch', function() {
    // 当 SCSS 文件被编辑时执行 SCSS 任务
    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts']);
});

　　优点：好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。

　　缺点：和Grunt 类似。集成度不高，要写很多配置后才可以用，无法做到开箱即用。

二、Webpack

　　Webpack 是一个打包模块化的JavaScript的工具，在Webpack里一切文件皆模块，通过 loader 转换文件，通过Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

　　一切文件，如JavaScript、CSS、SCSS、图片、模板，对于Webpack 来说都是一个个模块，这样的好处是能清晰地描绘各个模块之间的依赖关系，以方便Webpack进行组合和打包，经过Webpack的处理，最终会输出浏览器能使用的静态资源。

　　Webpack具有很大的灵活性，能配置处理文件的方式，使用方法大致如下：

module.exports = {
    // 所有模块的入口，webpack从入口开始递归解析出所有依赖的模块
    entry: './app.js',
    output: {
        // 将入口所依赖的所有模块打包成一个文件 bundle.js 输出
        filename: 'bundle.js'
    }
}

　　优点：

  • 专注于处理模块化的项目，能做到开箱即用、一步到位；
  • 可通过 Plugin 扩展，完整好用又不失灵活性；
  • 使用场景不局限于Web开发；
  • 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
  • 良好的开发体验；

　　缺点：只能用于采用模块化开发的项目。

三、为什么选择Webpack

　　经过多年的发展，Webpack 已经成为构建工具中的首选，这是因为：

  • 大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，Webpack可以为这些新项目提供一站式的解决方案；
  • Webpack有良好的生态和维护团队，能提供良好的开发体验并保证质量；
  • Webpack 被全世界大量的Web开发者使用和验证，能找到各个层面所需要的教程和经验分享。

四、Gulp与Webpack的区别

　　Gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 简单说就一个Task Runner，就是用来跑一个一个任务的。Gulp 不能解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题。Gulp工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

 

　　Webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

　　相同点：文件合并与压缩（css,js），sass/less预编译，启动server，版本控制。

　　不同点：Gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。