关于grunt、gulp和webpack等前端工程构建工具分析

[Hibop]

趁着还没正式进入需求开发前好好总结总结。这几年的前端开发经验，零零碎碎的接触了很多技术栈，但是静下心来看看从零开始搭个工程，发现还是还是有很多问题的。

在后续的工作学习中。打算在工程架构、源码、计算机网络好好系统学习总结一波，捡回曾经遗失的美好。

在新的公司，使用的主要技术栈是Vue+Vuex+webpack/gulp，看了几天的工程代码，有必要先从几个工程构建工具开始入手吧——

回顾下前端工程化历史：

1. 无模块化“面条代码”时代： 这是前端茹毛饮血的时代，基本上前端页面全部写在html、css、js中，或者更早的全部内嵌到html中，这种代码看起来维护起来有种杀人的冲动，当时偶尔赶上了这趟列车的尾巴；

2. 单例模式原型继承，jquery插件时代：这个时候初步利用原型、IFFE(立即执行函数)、闭包等**形成简单模块组织：

// IFFE
;(function($, win){
// TODOs....
})(jQuery, window)

// 原型 需要new实例化
function Banner(name) {
   this.name = name;
   ....
}
Banner.prototype.move = function() {};

// jQuery 扩展插件
（jquery源码解析和插件开发后面有必要再总结两篇，虽然已经慢慢退出常用框架，但是确实经典的jquery，优美的源码）
$(function(){
    $.extend({...});          // 扩展jquery静态方法,
    $.fn.extend({...})      // 扩展jquery的实例方法，fn对应prototype
})

3. require.js的依赖加载时代： 这也是个经典的前端时代，当时MVC框架backbone大行其道，结合requireJS确实在很多公司用的风生水起，这个时候前端代码开始多文件化。

4. gulp任务流时代： 当年看到前端同事跑动的cmd界面，暗暗想前端也可以这么玩，暗暗佩服牛逼的同事。
   Gulp 的定位是 Task Runner, 就是用来跑一个一个任务的。
   一群爱学习的前端无法忍受手动用compiler去编译各中sass、less、coffee、typescript等，用小工具去压缩代码和图片————搞出一个自动化流程工具grunt/gulp:
   一个个task pipe:

• rm 掉 dist文件夹中以前的旧文件
• 自动把sass编译成css, coffee编译成js
• 压缩各自的文件，压缩图片，生成图片sprite
• 拷贝minified/uglified 文件到 dist 文件夹
  但是它没发解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题.
  之前大家可以用 require.js, sea.js

var webpack = require('gulp-webpack');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

5. npm scripts + webpack 现代化时代：

后来出了一个 webpack 说 我们能不能把所有的文件(css, image, js) 都用 js 来 生成依赖，最后生成一个bundle呢？ 所以webpack 也叫做file bundler. 本来这就是 webpack 的初衷，require everything, bundle everything.
开始 webpack 刚出来的时候大家都是把它结合着 gulp 一起用的， gulp 里面有个 gulp-webpack，就是让 webpack 专门去做module dependency的事情, 生成一个bundle.js文件，然后再用 gulp 去做一些其他杂七杂八minify, uglify的事情。

后来人们发现 webpack 有个plugins的选项， 可以用来进一步处理经过loader 生成的bundle.js，于是有人写了对应的插件， 所以minify/uglify, 生成hash的工作也可以转移到webpack本身了，挤掉了gulp这部分的市场份额。 再后来大家有发现 npm/package.json 里面的scripts 原来好好用啊，调用任务的时候就直接写一个简单的命令，因为 gulp 也不就是各种插件命令的组合呀，大部分情况下越来越不需要 gulp/grunt 之类的了 ref. 所以你现在看到的很多新项目都是package.json里面scripts 写了一堆，外部只需要一个webpack就够了。

打个不恰当的比方，webpack就像微信一样，本来就是做聊天(module dependency)的，后来生生搞出一个微信小程序(processing files)，大家面对简单的需求发现这个比原生app方便使用啊，于是开发原生的人越来越少一样。

其实一般项目使用 npm scripts + webpack 就好了，现在三大框架react、angular、Vue用webpack搭建确实是支持度很高，当你发现有哪些任务你没法用 webpack 或者npm scripts 解决起来麻烦， 这个时候再引入task runner 也不迟。

其实都差不多, 主要用来处理文件IO的，原始的使用Nodejs fs模块也可以强撸的，这几个工具方便了使用，将IO变成任务队列和模块操作，grunt和webpack都是配置式，gulp语法灵活。

最近据说还出了个parcel，直接面向html一个命令解决所有打包。