构建工具对比
| 名称 | 简介 | 优点 | 缺点 | 应用场景 |
|---|---|---|---|---|
| webpack | 一种前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载 | 模块化、静态资源整合、公共代码拆分、异步加载、热更新等等 | 1. 配置复杂 2. 冗余代码较多 3. 不支持输出esm格式的bundle |
应用程序开发 |
| rollup | 一个模块打包工具, 可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式: iife: 自执行函数, 可通过 <script> 标签加载 amd: 通过 RequireJS 加载 cjs: Node 默认的模块规范, 可通过 Webpack 加载 umd: 兼容 IIFE, AMD, CJS 三种模块规范 esm: ES2015 Module 规范, 可用 Webpack, Rollup 加载 |
1. 基于ES6，支持动态导入、tree shaking 2. 可以将所有小文件打到一个bundle里，所有代码都在同一个函数作用域中，不压缩混淆的情况下代码依旧可读 3. 冗余代码少，执行快 |
1. 不支持热更新（可以通过livereload插件实现） 2. 对于commonjs模块，需要用rollup-plugin-commonjs插件读成ES6代码后再处理 3. umd和iife格式无法对公共代码进行拆分，因为自执行函数会把所有的模块都放到一个函数中，并没有像webpack一样有一些引导代码，所以没有办法做到代码拆分 |
框架、组件库、生成单一umd文件的场景 |
| gulp | 借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单，基于流式操作，通过各种 Transform Stream 来实现文件不断处理 输出 | 1. 文档简单，学习成本低 2. 借助插件，可以对大量源文件进行流式处理，可以对文件类型进行多种操作处理 |
1. 不支持tree shaking、热更新、公共代码拆分 2. 无法进行js模块化，只是对静态资源进行流式处理和整合 |
静态资源密集型场景，如css、img等静态资源整合 |
感受下 Element-ui 的 gulpfile.js
'use strict';
const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
function compile() {
return src('./src/*.scss')
.pipe(sass.sync())
.pipe(autoprefixer({
browsers: ['ie > 9', 'last 2 versions'],
cascade: false
}))
.pipe(cssmin())
.pipe(dest('./lib'));
}
function copyfont() {
return src('./src/fonts/**')
.pipe(cssmin())
.pipe(dest('./lib/fonts'));
}
exports.build = series(compile, copyfont);
