轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（下）

news2024/9/23 15:33:43

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 四、 Grunt
    • Grunt 的历史和应用场景
    • 安装和配置 Grunt
  • 五、 Rollup
    • Rollup 的特点和适用范围
    • 安装和配置 Rollup
  • 六、 总结与比较
    • 比较 Webpack、Gulp、Grunt 和 Rollup 的优缺点
    • 不同场景下的工具选择建议

四、 Grunt

Grunt 的历史和应用场景

Grunt 是一个流行的构建工具，它可以帮助开发者自动化各种任务，如

  • 压缩文件
  • 测试代码等。

Grunt 的历史可以追溯到 2010 年，当时由前 Rackspace 员工 John Smith 创建。Grunt 最初是为了简化前端开发流程而设计的，但是现在已经被广泛应用于各种场景，包括后端开发、移动应用程序开发等。

Grunt 的应用场景包括：

  1. 前端开发：Grunt 可以在前端开发过程中自动执行各种任务，如压缩文件、测试代码、编译 Sass 和 CoffeeScript 等。
  2. 后端开发：Grunt 可以在后端开发过程中自动执行各种任务，如压缩文件、测试代码、部署应用程序等。
  3. 移动应用程序开发：Grunt 可以在移动应用程序开发过程中自动执行各种任务，如压缩文件、测试代码、构建应用程序包等。

在这里插入图片描述

总之，Grunt 是一个功能强大、简单易用、灵活高效的构建工具，可以帮助开发者自动化各种任务，提高开发效率。

安装和配置 Grunt

以下是安装和配置 Grunt 的步骤：

  1. 安装 Node.js：安装 Grunt 之前需要先安装 Node.js。可以从 Node.js 的官方网站下载并安装 Node.js。

  2. 安装 Grunt：安装 Node.js 后，可以通过 npm（Node.js 包管理器）安装 Grunt。在命令行中输入以下命令：

npm install --save-dev grunt

这将会在项目中安装 Grunt 和相关的插件。

  1. 创建 Gruntfile.js 文件：在项目中创建一个名为 Gruntfile.js 的文件。这个文件将用于配置 Grunt 的各种参数。

  2. 配置任务：在 Gruntfile.js 文件中，可以通过使用 Grunt 的 API 创建任务。例如，以下代码创建了一个名为 build 的任务，用于压缩文件：

const grunt = require('grunt');
const gruntJs = require('grunt-js');
const gruntCss = require('grunt-css');
const gruntConsoleLog = require('grunt-console-log');

grunt.initConfig({
  js: {
    src: ['src/js/*.js'],
    dest: 'dist/js/bundle.js',
  },
  css: {
    src: ['src/css/*.css'],
    dest: 'dist/css/bundle.css',
  },
  log: {
    tasks: ['css', 'js'],
  },
});

grunt.loadNpmTasks('grunt-js');
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-console-log');

grunt.registerTask('build', 'css js log');

在这个例子中，grunt.initConfig 用于配置任务的参数，grunt.loadNpmTasks 用于加载相关的插件，grunt.registerTask 用于注册任务。

  1. 运行 Grunt：在命令行中输入以下命令，启动 Grunt 服务器：
grunt

这将会在 Grunt 服务器中监听文件更改，并在文件发生变化时自动重新执行相应的任务。

  1. 输出日志：Grunt 提供了丰富的输出日志功能，可以帮助开发者更好地了解构建过程。可以通过设置 logLevel 选项来控制输出的日志级别。例如，以下代码将日志级别设置为 warn：
const grunt = require('grunt');
const gruntJs = require('grunt-js');
const gruntCss = require('grunt-css');
const gruntConsoleLog = require('grunt-console-log');

grunt.initConfig({
  js: {
    src: ['src/js/*.js'],
    dest: 'dist/js/bundle.js',
  },
  css: {
    src: ['src/css/*.css'],
    dest: 'dist/css/bundle.css',
  },
  log: {
    tasks: ['css', 'js'],
  },
});

grunt.loadNpmTasks('grunt-js');
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-console-log');

grunt.registerTask('build', 'css js log');

grunt.log({
  level: 'warn',
});

这将会在构建过程中输出警告级别的日志，不会输出详细信息。

五、 Rollup

Rollup 的特点和适用范围

Rollup 是一个快速、高效、强大的 JavaScript 打包工具，它具有以下特点：

  1. 快速：Rollup 能够快速地打包 JavaScript 代码，因为它使用了一个高效的 JavaScript 解析器和一个优化器。
  2. 高效：Rollup 能够有效地减少 JavaScript 代码的大小，因为它能够识别和删除未使用的代码。
  3. 强大：Rollup 能够支持各种 JavaScript 模块格式，如 ES6 模块、CommonJS 模块、CJS 模块、Svelte 模块等。

在这里插入图片描述

Rollup 的适用范围包括：

  1. 单页面应用程序：Rollup 非常适合用于构建单页面应用程序，因为它能够有效地压缩代码并提高加载速度。
  2. 应用程序：Rollup 适用于构建应用程序，因为它能够有效地压缩代码并提高性能。
  3. 库：Rollup 适用于构建库，因为它能够有效地压缩代码并提高性能。
  4. 快速开发：Rollup 适用于快速开发，因为它能够快速地打包代码并提高构建速度。

在这里插入图片描述

总之，Rollup 是一个快速、高效、强大的 JavaScript 打包工具，适用于构建各种类型的 JavaScript 项目。

安装和配置 Rollup

以下是安装和配置 Rollup 的步骤：

  1. 安装 Node.js：安装 Rollup 之前需要先安装 Node.js。可以从 Node.js 的官方网站下载并安装 Node.js。

  2. 安装 Rollup：安装 Node.js 后，可以通过 npm（Node.js 包管理器）安装 Rollup。在命令行中输入以下命令：

npm install --save-dev rollup

这将会在项目中安装 Rollup 和相关的插件。

  1. 创建 rollup.config.js 文件：在项目中创建一个名为 rollup.config.js 的文件。这个文件将用于配置 Rollup 的各种参数。

  2. 配置输入和输出：在 rollup.config.js 文件中，可以通过设置 input 和 output 选项来指定输入文件和输出文件。例如，以下代码将输入文件设置为 src/main.js，输出文件设置为 dist/bundle.js：

import { rollup } from 'rollup';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
};

在这个例子中，rollup 是一个导入的 Rollup 函数，input 选项指定输入文件，output 选项指定输出文件和输出格式。

  1. 配置插件：Rollup 支持各种插件，如 resolve、commonjs、babel、svelte 等。可以通过设置 plugins 选项来配置插件。例如，以下代码将配置 Babel 插件：
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    babel({
      presets: ['@babel/preset-env'],
    }),
  ],
};

在这个例子中，rollup-plugin-babel 是导入的 Babel 插件，babel 函数是 Babel 插件的配置参数。

  1. 运行 Rollup：在命令行中输入以下命令，启动 Rollup 服务器：
rollup -c rollup.config.js

这将会在 Rollup 服务器中监听文件更改，并在文件发生变化时自动重新执行相应的任务。

  1. 输出日志：Rollup 提供了丰富的输出日志功能，可以帮助开发者更好地了解构建过程。可以通过设置 logLevel 选项来控制输出的日志级别。例如，以下代码将日志级别设置为 warn：
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    babel({
      presets: ['@babel/preset-env'],
    }),
  ],
  log: {
    level: 'warn',
  },
};

这将会在构建过程中输出警告级别的日志，不会输出详细信息。

六、 总结与比较

比较 Webpack、Gulp、Grunt 和 Rollup 的优缺点

工具优点缺点
Webpack- 强大的模块化支持，可以处理复杂的依赖关系
- 内置开发服务器，支持热模块替换
- 丰富的插件生态系统		- 学习曲线较陡峭
- 配置复杂，需要熟悉其配置文件
Gulp- 简洁的代码风格，易于上手
- 流式构建，能够高效地处理多个任务
- 插件丰富，可自定义任务流程		- 没有模块化的支持，可能需要结合其他工具使用
- 需要手动编写任务代码
Grunt- 强大的任务配置能力，可以定义复杂的构建流程
- 插件丰富，可满足各种构建需求		- 配置文件较为冗长，可读性相对较差
- 对于大型项目，配置和维护工作量较大
Rollup- 简单易懂的配置文件，容易上手
- 支持 ES6 模块化的打包，输出结果更为精简
- 高效的 Tree Shaking 功能，可以实现代码体积的优化		- 对于非模块化的库和依赖，需要额外处理
- 插件生态相对较少

注意：上述表格只包含主要优点和缺点，具体使用和评估这些工具的选择还需要根据项目需求、团队熟悉程度和个人偏好来决定。

不同场景下的工具选择建议

根据不同的场景和需求，建议选择不同的构建工具：

  1. 对于大型 Web 应用，建议使用 Webpack。Webpack 可以处理复杂的依赖关系，并拥有强大的模块化支持，有利于管理和维护复杂的代码结构。此外，Webpack 内置了开发服务器，支持热模块替换，可以大大提高开发效率。不过，Webpack 的学习曲线较陡峭，配置较为复杂，需要花费一定时间来熟悉。

  2. 对于中小型 Web 应用，或者针对某个特定的需求，建议使用 Gulp。Gulp 的代码风格简洁，易于上手，而且支持流式构建，可以高效地处理多个任务。同时，Gulp 的插件丰富，可以满足大部分的构建需求。当然，Gulp 没有内置的模块化支持，如果需要处理模块依赖，可以结合其他工具来使用。

  3. 对于需要定义复杂的构建流程的项目，建议使用 Grunt。Grunt 具有强大的任务配置能力，可以定义复杂的构建流程，有利于自动化构建流程。虽然 Grunt 的配置文件较为冗长，可读性相对较差，但是对于大型项目来说，这些配置功夫是值得付出的。

  4. 对于库的开发和打包，建议使用 Rollup。Rollup 支持 ES6 模块化的打包，输出结果比较精简，可以减小代码体积。同时，Rollup 的 Tree Shaking 功能非常高效，可以帮助实现代码体积的进一步优化。不过，Rollup 的插件生态相对较少，对于非模块化的库和依赖，需要额外处理。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1380906.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

蓝桥杯省赛无忧 STL 课件15 queue

蓝桥杯省赛无忧 STL 课件15 queue

01 queue队列 02 priority_queue优先队列 接下来介绍几种优先队列修改比较函数的方法 03 deque双端队列 04 例题讲解 https://www.lanqiao.cn/problems/1113/learning/?page1&first_category_id1&problem_id1113输入 5 IN xiaoming N IN Adel V IN laozhao N OUT …
阅读更多...
VMware workstation搭建与安装AlmaLinux-9.2虚拟机

VMware workstation搭建与安装AlmaLinux-9.2虚拟机

VMware workstation搭建与安装AlmaLinux-9.2虚拟机 适用于需要在VMware workstation平台安装AlmaLinux-9.2（最小化安装、无图形化界面）虚拟机。 1. 安装准备 1.1 安装平台 Windows 11 1.2. 软件信息 软件名称软件版本安装路径VMware-workstation 1…
阅读更多...
一些硬件知识（三）

一些硬件知识（三）

uint8_t, uint32_t, 和 uint16_t 是 C 和 C 语言中的数据类型&#xff0c;它们分别表示无符号的 8 位、32 位和 16 位整数。这些数据类型定义在标准库 <stdint.h>&#xff08;在 C 语言中&#xff09;或 <cstdint>&#xff08;在 C 中&#xff09;。 uint8_t&…
阅读更多...
记录 | ubuntu软链接查看、删除、创建

记录 | ubuntu软链接查看、删除、创建

软连接查看 ls -il 软连接删除 rm -rf ** 软连接创建 ln -s 源文件 目标文件 实例&#xff0c;软连接报错&#xff1a; 若要建立libtiny_reid.so*间软连接&#xff1a; 先删除 rm -rf libtiny_reid.so libtiny_reid.so.3 libtiny_reid.so.3.1 再建立 ln -s libtiny_re…
阅读更多...
Nocalhost 为 KubeSphere 提供更强大的云原生开发环境

Nocalhost 为 KubeSphere 提供更强大的云原生开发环境

1 应用商店安装 Nocalhost Server 已集成在 KubeSphere 应用商店&#xff0c;直接访问&#xff1a; 设置应用「名称」&#xff0c;确认应用「版本」和部署「位置」&#xff0c;点击「下一步」&#xff1a; 在「应用设置」标签页&#xff0c;可手动编辑清单文件或直接点击「安装…
阅读更多...
从DETR到Mask2former(2): 损失函数loss function

从DETR到Mask2former(2): 损失函数loss function

DETR的损失函数包括几个部分&#xff0c;如果只看论文或者代码&#xff0c;比较难理解&#xff0c;最好是可以打断点调试&#xff0c;对照着论文看。但是现在DETR模型都已经被集成进各种框架中&#xff0c;很难进入内部打断掉调试。与此同时&#xff0c;数据的label的前处理也比…
阅读更多...
分享一个好用的免费在线扣图网址

分享一个好用的免费在线扣图网址

具体效果 附地址 https://cutout.aiwave.cc/
阅读更多...
MySQL 日志之二进制日志-binlog

MySQL 日志之二进制日志-binlog

1、简介 MySQL 的二进制日志记录了对 MySQL 所有的更改操作&#xff0c;不包括 select 和 show 等操作。二进制日志文件主要有&#xff1a;数据恢复、主从复制、审计&#xff08;判断是否有注入攻击&#xff09;等作用。 2、二进制日志参数配置 2.1、文件参数配置 linux 中 My…
阅读更多...
STL标准库与泛型编程（侯捷）笔记2

STL标准库与泛型编程（侯捷）笔记2

STL标准库与泛型编程&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youbute: 侯捷-STL标准库与泛型编程 B站: 侯捷 - STL Github:STL源码剖析中源码 https://github.com/SilverMaple/STLSourceCo…
阅读更多...
Flink窗口（2）—— Window API

Flink窗口（2）—— Window API

目录 窗口分配器 时间窗口 计数窗口 全局窗口 窗口函数 增量聚合函数 全窗口函数&#xff08;full window functions&#xff09; 增量聚合和全窗口函数的结合使用 Window API 主要由两部分构成&#xff1a;窗口分配器&#xff08;Window Assigners&#xff09;和窗口函…
阅读更多...
世邦spon IP网络对讲广播系统任意文件上传漏洞

世邦spon IP网络对讲广播系统任意文件上传漏洞

产品介绍 世邦通信IP网络对讲广播系统采用领先的IPAudio™技术,将音频信号以数据包形式在局域网和广域网上进行传送,是一套纯数字传输系统。 漏洞描述 spon IP网络对讲广播系统存在任意文件上传漏洞&#xff0c;攻击者可以通过构造特殊请求包上传恶意后门文件&#xff0c;从…
阅读更多...
软件测试|解决Github port 443 : Timed out连接超时的问题

软件测试|解决Github port 443 : Timed out连接超时的问题

前言 GitHub是全球最大的开源代码托管平台之一&#xff0c;许多开发者和团队使用它来管理和协作开源项目。但在当下&#xff0c;我们在clone或者提交代码时会经常遇到"GitHub Port 443: Timed Out"错误&#xff0c;这意味着我们的电脑无法建立与GitHub服务器的安全连…
阅读更多...
UISegmentedControl控件定制

UISegmentedControl控件定制

1.在xib中设计如下: 背景颜色: 段标题与数量 : 2.在代码中控制 关联控件 注册控件事件 控件事件处理函数实现: 定制Title颜色 4 --- > UIControlStateSelected 0 --- > UIControlStateNormal 最终实现效果: 取控件选中时的索引与显示文本: 输出:
阅读更多...
理想汽车迎来新算力平台负责人,内部化名为张一粟；王者荣耀在抖音直播全面开放；陈楚生等人现身央视春晚彩排

理想汽车迎来新算力平台负责人,内部化名为张一粟；王者荣耀在抖音直播全面开放；陈楚生等人现身央视春晚彩排

今日精选 • 理想汽车迎来新算力平台负责人,内部化名为张一粟。目前理想内部暂未公布其内部职级• 王者荣耀在抖音直播全面开放• 陈楚生等人现身央视春晚彩排 投融资 • 2023年12月份&#xff0c;中国社会融资规模增量为1.94万亿元• OpenAI 支持的人形机器人公司 1X 完成 …
阅读更多...
【C++】- 类和对象（构造函数！！explicit关键字stastic关键字！！详解）

【C++】- 类和对象（构造函数！！explicit关键字stastic关键字！！详解）

类和对象④ 构造函数初始化列表explicit关键字static成员 构造函数初始化列表 我们已经初步了解了构造函数------->类和对象②那么调用构造函数就是给了对象中各个成员变量一个合适的初始值。 但实际上&#xff0c;我们想要做的是初始化成员变量&#xff0c;在构造函数中对…
阅读更多...
【STM32】STM32学习笔记-FlyMCU串口下载和STLINK Utility(30)

【STM32】STM32学习笔记-FlyMCU串口下载和STLINK Utility(30)

00. 目录 文章目录 00. 目录01. 串口简介02. 串口连接电路图03. FlyMCU软件下载程序04. 串口下载原理05. FlyMCU软件其它操作06. STLINK Utility软件07. 软件下载08. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简…
阅读更多...
【MySQL】MySQL表的约束-空属性/默认值/列属性/zerofill/主键/自增长/唯一键/外键

【MySQL】MySQL表的约束-空属性/默认值/列属性/zerofill/主键/自增长/唯一键/外键

文章目录 表的约束1.空属性 --null && not null2.默认值 -- default3.列描述4.zerofill5.主键6.自增长7.唯一键8.外键 表的约束 表的约束&#xff1a;表中一定要有各种约束&#xff0c;通过约束&#xff0c;让我们未来插入数据库表中的数据是符合预期的。约束的本质是…
阅读更多...
成就动机测试

成就动机测试

成就动机测试广泛应用在职业发展领域&#xff0c;如&#xff1a;企业Hr人力资源管理部门&#xff0c;用于评估分析员工的潜能和价值&#xff0c;适用场景有人才招聘&#xff0c;岗位晋升&#xff0c;绩效考评等等。在大学生做职业规划&#xff0c;求职应聘中&#xff0c;应用成…
阅读更多...
UG装配体组件重命名与导出组件

UG装配体组件重命名与导出组件

在一个装配文件中&#xff0c;如果我们想对其中一个零件的名称进行更改&#xff0c;可以打开单独文件然后另存为改名&#xff0c;或者直接改名后在装配体中进行替换&#xff0c;但是这样这样都是比较麻烦 我们可以使用零组件更名及导出命令 菜单-GC工具箱-GC数据规范-其他工具…
阅读更多...
哪里能找到好用的PPT模板？12个免费模板网站让你畅快办公！

哪里能找到好用的PPT模板？12个免费模板网站让你畅快办公！

你是否有过这样的经历&#xff0c;在准备重要会议或者演讲的时候&#xff0c;为找不到合适的PPT模板而困扰&#xff1f;或是在网上漫无目的地搜寻&#xff0c;结果收获的是设计平淡无奇的PPT模板&#xff1f; 如果你有同样的疑问&#xff0c;那么你来对地方了&#xff01;在这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023