正文

前端构建工具对比(代码片段)

zmj97  zmj97  2023-02-14  647

关键词：

title: 前端构建工具对比
toc: true
date: 2018-10-17 19:41:31
categories:

tags:

前端构建工具
grunt
gulp
webpack

前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：

源代码无法直接运行，必须通过转换后才可以正常运行。

构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容：

代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。

文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。

代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。

模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。

自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。

代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力，解放了我们的生产力。

Npm Scripts

Npm是在安装Node. js时附带的包管理器，

Npm Script则是Npm内置的一个功能，允许在package.json文件里面使用scripts字段定义脚本命令：


  // ...
  "scripts": 
    "build": "node build.js",
    "dev": "node dev.js",
    "pub": "node build.js"

优点：内置，无须安装其他依赖。

缺点：功能太简单，虽然提供了pre和post两个钩子，但不能方便地管理多个任务之间的依赖。

Grunt

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

Grunt有大量现成的插件封装了常见的任务，

也能管理任务之间的依赖关系，自动化地执行依赖的任务，

每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里，

例如：

module.exports = function(grunt) 
  // 所有插件的配置信息
  grunt.initConfig(
    // uglify插件的配置信息
    uglify: 
      app_task: 
        files: 
          ‘build/app.min.js‘: [‘lib/index.js‘, ‘lib/test.js‘]
        
      
    ,
    // watch插件的配置信息
    watch: 
      another: 
        files: [‘lib/*.js‘],
      
    
  );
  // 告诉Grunt我们将使用这些插件
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);
  // 告诉Grunt我们在终端中启动Grunt时需要执行哪些任务
  grunt.registerTask(‘dev‘, [‘uglify‘,‘watch‘]);
;

在项目根目录下执行命令grunt dev，就会启动JavaScript文件压缩和自动刷新功能。

优点：

灵活，它只负责执行我们定义的任务；

大量的可复用插件封装好了常见的构建任务。

缺点：

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

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‘);
var uglify = require(‘gulp-uglify‘);
// 编译SCSS任务
gulp.task(‘sass‘, function() 
  // 读取文件，通过管道喂给插件
  gulp.src(‘./scss/*.scss‘)
    // SCSS 插件将 scss 文件编译成 CSS 文件
    .pipe(sass())
    // 输出文件
    .pipe(gulp.dest(‘./css‘));
);
// 合并压缩JavaScript文件
gulp.task(‘scripts‘, function() 
  gulp.src(‘./js/*.js‘)
    .pipe(concat(‘all.js‘))
    .pipe(uglify())
    .pipe(gulp.dest(‘./dist‘));
);
// 监听文件的变化
gulp.task(‘watch‘, function()
  // 当 scss 文件被编辑时执行 SCSS 任务
  gulp.watch(‘./scss/*.scss‘, [‘sass‘]);
  gulp.watch(‘./js/*.js‘, [‘scripts‘]);    
);

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

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

可以将Gulp看作Grunt的加强版。

相对于Grunt，Gulp增加了监听文件、读写文件、流式处理的功能。

Fis3

Fis3 是一个来自百度的优秀国产构建工具。

相对于Grunt、Gulp这些只提供了基本功能的工具，

Fis3集成了Web开发中的常用构建功能。

读写文件：通过fis.match读文件，release配置文件的输出路径。

资源定位：解析文件之间的依赖关系和文件位置。

文件指纹：在通过useHash配置输出文件时为文件URL加上md5戳，来优化浏览器的缓存。

文件编译：通过parser配置文件解析器做文件转换，例如将ES6编译成ES5。

压缩资源：通过optimizer配置代码压缩方法。

图片合并：通过spriter配置合并CSS里导入的图片到一个文件中，来减少HTTP请求数。

大致使用如下：

// 加md5
fis.match(‘*.js,css,png‘, 
  useHash: true
);
// 通过fis3-parser-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‘)
);

优点：集成了各种Web开发所需的构建功能，配置简单、开箱即用。

缺点：目前官方已经不再更新和维护，不支持最新版本的Node.js。

Fis3是一种专注于Web开发的完整解决方案，如果将Grunt、Gulp比作汽车的发动机，则可以将Fis3比作一辆完整的汽车。

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开发
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
良好的开发体验。

缺点：

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

Rollup

Rollup是一个和Webpack很类似但专注于ES6的模块打包工具。

它的亮点在于，能针对ES6源码进行Tree Shaking（摇树优化），以去除那些已被定义但没被使用的代码并进行Scope Hoisting（作用域提升），以减小输出文件的大小和提升运行性能。

然而Rollup的这些亮点随后就被Webpack模仿和实现。

由于Rollup的使用方法和Webpack差不多，所以这里就不详细介绍如何使用Rollup了。

它们的差别：

Rollup是在Webpack流行后出现的替代品
Rollup生态链还不完善，体验不如Webpack
Rollup的功能不如Webpack完善，但其配置和使用更简单
Rollup不支持Code Spliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码
Rollup在用于打包JavaScript库时比Webpack更有优势，因为其打包出来的代码更小、更快。但它的功能不够完善，在很多场景下都找不到现成的解决方案。

为什么选择Webpack

上面介绍的构建工具是按照它们诞生的时间排序的，

它们是时代的产物，侧面反映出Web开发的发展趋势，如下所述：

在Npm Script和Grunt时代，Web开发要做的事情变多，流程复杂，自动化思想被引入，用于简化流程
在Gulp时代，开始出现一些新语言用于提高开发效率，流式处理思想的出现是为了简化文件转换的流程，例如将ES5转换成ES6
在Webpack时代，由于单页应用的流行，网页的功能和实现代码变得复杂、庞大，Web开发向模块化改进
这些构建工具都有各自的定位和专注点，它们之间既可以单独完成任务，也可以相互搭配来弥补各自的不足。在了解这些常见的构建工具后，我们需要根据自己的需求去判断应该如何选择和搭配它们才能更好地满足自己的需求。

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

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

参考链接：https://blog.csdn.net/broadview2006/article/details/79091719

前端构建工具gulpjs的使用介绍及技巧(代码片段)

转自：https://www.cnblogs.com/2050/p/4198792.htmlgulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没... 查看详情

前端构建工具大盘点：gulpwebpackviterollupesbuildsnowpackbabelparcelswctsc(代码片段)

...表就是webpackVSvite）其他比较个人理解总结官网背景做前端也有好多年了，从最早的jQuery时代到现在的三大框架，这过程中用到了很多构建工具，今天就来盘点一下我们前端开发常用的这些构建工具。盘点之前呢&#x... 查看详情

前端工程化系列[03]-grunt构建工具的运转机制(代码片段)

在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中，已经对Grunt做了简单的介绍，此外，我们还知道了该如何来安装Grunt环境，以及使用一些常见的插件了，这篇文章主要介绍Grunt的核心组件和运转机制。Grunt是一套前端自... 查看详情

前端工程化系列[04]-grunt构建工具的使用进阶(代码片段)

在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中，我们对Grunt以及Grunt插件的使用已经有了初步的认识，并探讨了Grunt的主要组件以及它的运转机制，这篇文章是Grunt使用... 查看详情

前端构建这十年(代码片段)

... 李十三https://segmentfault.com/a/1190000040496020◆ 写在前面前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的bundle类模块化构建工具，再到现在的bundleless基... 查看详情

项目自动构建工具对比(mavengradleant)(代码片段)

Java世界中主要有三大构建工具：Ant、Maven和Gradle。经过几年的发展，Ant几乎销声匿迹、Maven也日薄西山，而Gradle的发展则如日中天。Maven的主要功能主要分为5点，分别是依赖管理系统、多模块构建、一致的项目结构、一致的构建... 查看详情

前端构建的初步尝试(代码片段)

...家不必去深入研究这个东西.最基本的是有个概念.什么是前端构建?在平时我们浏览一些大型的站点,会发现其中的一些css经过压缩(去掉了空白符,注释),js经过了混淆和压缩.一些引用的文件的链接会加上奇怪的字串(文件md5),例如:<... 查看详情

cypress前端自动化测试工具——环境搭建初步实现ui自动化与selenium做对比(代码片段)

安装准备cypress是前端的自动化框贺，所以首次应安装npm.安装nmp见另一篇文章npm环境搭建安装cypresscd/your/project/pathcnpmicypress-g或npminstallcypress--save-dev启动cypress进入安装目录，输入cypressopen启动cypress程序下图红框是手动输入执行的... 查看详情

前端性能精进——构建(代码片段)

前端性能精进（七）——构建　　前端构建是指通过工具自动化地处理那些繁琐、重复而有意义的任务。　　这些任务包括语言编译、文件压缩、模块打包、图像优化、单元测试等一切需要对源码进行处理的工作。　　在将这类... 查看详情

前端打包工具esbuild--模块化esmesbuild-loader(代码片段)

模块化编程在前端领域已非常普遍，应用程序中将各种功能细分成独立的模块（单独文件）进行开发。modulebundler将所有文件串联起来变成了必须。JavaScript社区中有很多程序的打包工具，如Webpack、Rollup、Parcle等... 查看详情

前端自动化构建之gulp(代码片段)

...了，每次都是用脚手架搭好的文件，在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。基本介绍gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载... 查看详情

javascript新一代构建工具对比「超全面」

...了一批新的开发者工具，它们正在紧跟过去几年主导前端开发的工具，包括webpack、Babel、Rollup、Parcel、create-react-app。这些新的工具并不是为了完查看详情

前端自动化构建工具webpack1.x开发模式使用指南(代码片段)

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森٩(‘ω’)و#WebpackWebpack是时下最流行的模块打包器它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件进行分析、压缩、合并、打包，最后生成浏览... 查看详情

深度分析前端构建工具：vite2v.ssnowpack3v.s.webpack5(代码片段)

...5吧！WebpackWebpack是近年来使用量最大，同时社区最完善的前端打包构建工具，查看详情

vite学习笔记(代码片段)

一、认识ViteWebpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具：比如rollup、parcel、gulp、vite等等什么是vite呢？官方的定位：下一代前端开发与构建工具；如何定义下一代... 查看详情

前端开发工具集eutils(代码片段)

项目介绍该项目整理了前端比较常用的工具集，包括js工具和css工具；当我们新建一个前端项目时，只需要引入这个npm包，就可以省去很多写工具的重复工作；源码地址APIversioncollection项目规范函数使用小驼峰方式命名对象使用... 查看详情

gulp自动化构建工具的使用(代码片段)

gulp自动化构建工具：　　把前端开发常见的处理（“搬砖”）程序，通过一个工具模块管理起来，只需配置一次，达到自动处理目的，简化开发，提高效率!！安装：　1.全局安装(全局安装一个gulp命令)　　A.下载安装... 查看详情

webpack简介(代码片段)

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力。Webpack凭借强大的功能与良好的使用体验... 查看详情