Javascript五十问——从源头细说Webpack与Gulp

前言：Webpack 与 gulp是目前圈子内比较活跃的前端构建工具。网上有不少两者比较的文章，面试中也会常常遇到 gulp，Webpack的区别这样的问题。对于初学者来讲，对这两者每每容易认识不清，今天，就从事件的源头，说清楚Webpack与gulp。

Gulp

那是2014年，虽然JQuery风光多年，可是前端却暗流涌动；MVVM刚刚提出不久，Angular快速成长，而React和Vue也刚刚开源不到一年，尚属于冷门小语种。那个时候，前端工做者面临的主要矛盾在于日益增加的业务复杂化的需求同落后低效率的前端部署。开发工做者为了发布一个网站，每每会重复的进行一些与开发无关的工做，手动完成这些工做会带来很大的挫败感。这个时候，自动化构建工具及应运而生，gulp就是在大浪淘沙中的胜利者。

Gulp是基于流的前端构建工具，nodejs的stream操做来读取和操做数据；能够实现文件的转换，压缩，合并，监听，自动部署等功能。gulp拥有强大的插件库，基本上知足开发需求，并且开发人员也能够根据本身的需求开发自定义插件。可贵是，gulp只有五个api，容易上手。

const gulp = require('gulp');
const sass = require("gulp-sass")

gulp.task("sassStyle",function() {
    gulp.src("style/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("style"))
})

上面就是一个基本的gulpfile配置文件，实现了scss文件到css文件的转换；在终端输入gulp sassStyle就可以进行文件处理了。
对于gulp而言，会有一个task，这个task只会作一件事，好比将sass格式的文档转换成css文件；对于一个task而言，会有一个入口文件，即gulp.src，最会有一个目标文件，即gulp.dest；一入一出，能够将gulp理解为 一元函数，输入一个x，根据funcion产出一个y。

Gulp简单，快速，自动化的构建方案，收获了不少开发者的喜好。可是怎样的机遇，让webpack占据了前端工程化的半壁江山呢？

Webpack

解决方案永远是紧跟需求的脚步的。随着React与Vue份额愈来愈大，spa开发模式应用在愈来愈多的领域中，而ES6 Module语法的提出与大规模应用，模块化开发方式愈来愈受人们的青睐。导致前端文件之间的依赖性愈来愈高，这时候就须要一个工具可以解析这些依赖，而且将它们有条理的打包起来，优化请求，最好顺便可以解析成浏览器能够识别的语言——这正是webpack所承担的工做;而不少开发者，也是从react或者vue的项目入手webpack的。

图片来源于互联网，侵删

Webpack 是前端资源模块化 管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分割，等到实际须要的时候再异步加载——来自Webpack官方网站。
因此Webpack只完成两件事：按需加载，打包。

module.exports = {
  // 入口文件，是模块构建的起点，同时每个入口文件对应最后生成的一个 chunk。
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/app.js')
    ]
  },
  // 文件路径指向(可加快打包过程)。
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  // 生成文件，是模块构建的终点，包括输出文件与输出路径。
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  // 这里配置了处理各模块的 loader ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader。
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件对象，在 webpack 的事件流中执行对应的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

上面是比较简单的webpack配置文件 webpack.config.js,若是说gulp是一个一元函数，那么，webpack就是一个多元函数或者是加工厂；webpack从入口文件开始，递归找出全部依赖的代码块，再将代码块按照loader解析成新内容，而在webpack会在各个特定的时期广播对应事件，插件会监听这些事件，在某个事件中进行特定的操做。通俗一点来讲，webpack自己来递归找到各个文件之间的依赖关系，在这个过程当中，使用loaders对文件进行解析，最后，在各个不一样的事件阶段，插件能够对文件进行一个统一的处理。

webpack.config文件会包括如下几部分：

1.entry:入口，webpack问此文件入手迭代。
2.output: 打包后造成的文件出口。
3.module: 模块，在webpack中一个模块对应一个文件。webpack会从entry开始，递归找出全部依赖的模块
4.loaders:文件解析的各类转换器
5.plugin:拓展插件

webpack的配置文件和构建方式比较复杂，这里再也不赘述，感兴趣的同窗能够参考我列出来的参考文献第三篇文章，或者能够关注个人专栏，后期我会出一篇关于webpack的学习笔记。

比较

因此，咱们能够看出来，虽然Webpack与gulp都是前端工程化的管理工具，可是两者的侧重点不一样——gulp更加关注的是自动化的构建工具，你把代码写好了，gulp会帮你编译、压缩、解析。而Webpack关注的是在模块化背景下的打包工做；它侧重的仍是如何将依赖的文件合理的组织起来，而且实现按需加载。

总结

总的来讲，虽然webpack以打包起家，可是gulp可以实现的功能，Webpack也能作；那么，是否是咱们之后都要惟webpack马首是瞻呢？非也，非也！webpack功能强大，可是它的缺点也来自于此；webpack并不是一个轻量级的工具，学习曲线也非gulp那般平缓。曾经，gulp为了弥补js打包方面的不足，也有gulp-webpack插件的出现；可是webpack强大如斯，若是仅仅只是解析es6文件，未免有大马拉小车之感。
根据个人项目实践经验，若是你要构建一个复杂的项目，项目使用vue或者react，模块化引领，那么请选择Webpack，Webpack天生模块化，更加适合于SPA的应用场景，而gulp在SPA下明显后力不足。若是你只是开发一个工具，请选择gulp，至于js打包这种工做，有更加专注的rollup。毕竟，若是只是写一个年会抽奖工具活跃气氛，就不须要webpack火种送碳了。

总结下来：gulp与Webapck是各有所长，并不存在东风压倒西风，而在前端工程化的大旗下，并不是只有Webpack与gulp，咱们还能看到rollup与browserify的一席之地。所以，在真正的工做中，仍是要结合项目自己特色，切忌人云亦云。

参考文献

一、JavaScript开发者的工具箱 很是实用
二、Gulp官网
三、超级详细的Webpack解读—五星推荐
四、端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上—五星推荐