前端构建工具简介_前端什么是构建-优快云博客

本文链接：https://blog.youkuaiyun.com/u014465934/article/details/82965006

1.什么是构建工具

比如我们执行一些例如CoffeeScript/ES6 去代替 Javascript、JS或CSS压缩、用Less去写CSS、用Jade去写HTML、用Browserify去模块化、为非覆盖式部署的资源加MD5戳等，这些操作如果我们一遍遍手动执行，非常耗费时间和精力，所以前端构建工具，或者较前端自动化构建工具，就是用来让我们不再做机械重复的事情，解放我们的双手的。

以gulp为例，编写gulpfile.js

例如：

gulp = require('gulp')
coffee = require('gulp-coffee')
uglify = require('gulp-uglify')
rename = require('gulp-rename')

file = './src/js/a.coffee'

gulp.task('coffe',function(){

	gulp.src(file)
		.pipe(coffee())   //编译
		.pipe(uglify())	 //压缩
		.pipe(rename({
			extname:".min.js"    //重命名
		}))
		.pipe(gulp.dest('./build/js'))
})

gulp.task('watch',function(
	gulp.watch(file,['coffee'])
))

gulp.task('default',['coffee'])

这样，我只要执行一下 gulp watch，它就可以自动监视 a.coffee 的变化，每次修改 a.coffee 并保存后，它就会自动执行编译->压缩丑化->重命名这一系列动作了。

参考文章：https://www.zhihu.com/question/35595198

2.构建工具的发展

构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。

构建可以实现如下内容：

代码转换：将 TypeScript/es6 编译成JavaScript、将 SCSS 编译成 CSS等。
文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步记在。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

构建工具发展：Npm Scripts、Grunt、Gulp、FIS 3、Webpack、Rollup、Parcel

Grunt：

Grunt 的优点是：

灵活，它只负责执行我们定义好的任务；
大量可复用插件封装好了常见的构建任务。

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

Grunt 相当于进化版的 Npm scripts，它的诞生其实是为了弥补 Npm Scripts 的不足。

Gulp：

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

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

// 引入 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
        .pipe(sass())
        // 输出文件
        .pipe(guilp.dest('./css'));
});
// 合并压缩 JavaScript 文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dest'));
});
// 监听文件变化
gulp.task('watch', function() {
    // 当 SCSS 文件被编辑时执行 SCSS 任务
    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts']);
});

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

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

可以将Gulp 看做是 Grunt 的加强版。相对于 Grunt ，Gulp 增加了文件监听、读写文件、流式处理的功能。

FIS 3：

Fis3是一个来自百度的优秀国产构建工具。相对于 Grunt、Gulp 这些只提供了基本功能的工具。Fis3集成了开发者常用的构建功能，如下所述。

读写文件：通过 fis.match 读文件，release 配置文件输出路径。
资源定位：解析文件之间的依赖关系和文件位置。
文件指纹：在通过 useHash 配置输出文件时为文件 URL加上 md5 戳，来优化浏览器的缓存。
文件编译：通过 parser 配置文件解析器做文件转换，例如将 ES6 编译成 ES5。
压缩资源：通过 optimizer 配置代码压缩方法。
图片合并：通过 spriter 配置合并 CSS 里导入的图片到一个文件中，来减少 HTTP 请求数。

大致使用如下：

// 加 md5
fis.match('*.{js,css,png}', {
    useHash: true
});
// 通过fis3-parse-typescript插件可将 TypeScript 文件转换成 JavaScript 文件
fis.match('*.ts', {
    parser: fis.plugin('typescript')
});
// 对CSS进行雪碧图合并
fis.match('*.css', {
    // 为匹配到的文件分配属性 useSprite
    useSprite: true
});
// 压缩 JavaScript
fis.match('*.js', {
    optimizer: fis.plugin('uglify-js')
});
// 压缩CSS
fis.match('*.css', {
    optimizer: fis.plugin('clean-css')
});
// 压缩图片
fis.match('*.png', {
    optimizer: fis.plugin('png-compressor')
});

可以看出 Fis3 很强大，内置了许多功能，无需做太多配置就能完成大量工作。

Fis3的优点：集成了各种Web老发所需的构建功能，配置简单，开箱即用。其缺点是目前官方已经不再更新和维护，不支持最新版本的Node。

Webpack：

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

其官网的首页图很形象的展示了 Webpack 的定义，如下图：

在这里插入图片描述

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

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

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

Webpack的优点是：

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

Rollup：

Rollup 是一个和 Webpack 很类似但专注于ES6的模块打包工具。它的亮点在于，针对ES6源码进行 Tree Shaking,以去除那些已经被定义但没被使用的代码并进行 Scope Hoisting，以减少输出文件的大小和提升运行性能。然而 Rollup 的这些亮点随后就被 Webpack 模仿和实现了。

Parcel：

Parcel 是最近新起的Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

Parcel的优点：

极速打包。Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。
开箱即用。对 JS, CSS, HTML, 文件及更多的支持，而且不需要插件。
自动转换。如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码。
-热模块替换。Parcel 无需配置，在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。
友好的错误日志。当遇到错误时，Parcel 会输出语法高亮的代码片段，帮助你定位问题。

缺点：