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

news2024/9/27 12:09:21

在这里插入图片描述

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

文章目录

  • 一、引言
    • 构建工具的重要性和目的
    • 介绍 Webpack、Gulp、Grunt 和 Rollup
  • 二、 Webpack
    • Webpack 的功能和特点
    • 安装和配置 Webpack
  • 三、 Gulp
    • Gulp 的工作原理和优势
    • 安装和配置 Gulp

一、引言

构建工具的重要性和目的

构建工具是指用于软件开发过程中自动执行构建、编译、测试和部署任务的工具。
它们可以帮助开发人员提高软件开发效率，并确保软件的质量和可靠性。

以下是构建工具的重要性和目的：

  1. 提高软件开发效率：构建工具可以自动化软件开发过程中重复的构建、编译、测试和部署任务，从而减少开发人员的工作量。这可以提高软件开发效率，并减少软件开发过程中的错误和问题。
  2. 确保软件的质量和可靠性：构建工具可以确保软件的构建、编译、测试和部署过程按照预期进行，从而减少软件开发过程中的错误和问题。这可以确保软件的质量和可靠性，并提高软件的维护和开发效率。
  3. 自动化构建过程：构建工具可以自动化软件开发过程中重复的构建、编译、测试和部署任务，从而减少开发人员的工作量。这可以提高软件开发效率，并减少软件开发过程中的错误和问题。
  4. 提高软件的性能和质量：构建工具可以确保软件的构建、编译、测试和部署过程按照预期进行，从而减少软件开发过程中的错误和问题。这可以确保软件的质量和可靠性，并提高软件的性能和质量。

总之，构建工具是软件开发中非常重要的工具，它们可以帮助开发人员提高软件开发效率，并确保软件的质量和可靠性。构建工具可以自动化软件开发过程中重复的构建、编译、测试和部署任务，从而减少开发人员的工作量。开发人员应该熟练掌握构建工具的方法，并充分利用它们来提高软件的质量和开发效率。

介绍 Webpack、Gulp、Grunt 和 Rollup

Webpack、Gulp、Grunt 和 Rollup 是四种常用的构建工具，它们都可以用于自动执行构建、编译、测试和部署任务的工具。

以下是它们的介绍：

1. Webpack：

Webpack 是一个模块打包工具，它可以帮助开发者将多个模块打包成一个文件，从而提高项目的加载速度。

Webpack 支持多种模块格式，如 CommonJS、ES6 模块和 JSON 模块等。

Webpack 还可以将模块之间的依赖关系解析出来，从而优化项目的加载顺序。

Webpack 还可以将 CSS 文件转换为模块，从而支持 CSS 模块。

在这里插入图片描述

2. Gulp：

Gulp 是一个基于 Node.js 的构建工具，它可以帮助开发者自动执行各种任务，如压缩文件、复制文件、编译 Sass 和 Less 等。

Gulp 支持文件监听机制，当文件发生变化时，Gulp 会自动执行相应的任务。Gulp 还支持任务队列和并行操作，可以提高构建速度。
在这里插入图片描述

3. Grunt：

Grunt 是一个基于 Node.js 的构建工具，它可以帮助开发者自动执行各种任务，如压缩文件、复制文件、编译 Sass 和 Less 等。

Grunt 支持文件监听机制，当文件发生变化时，Grunt 会自动执行相应的任务。Grunt 还支持任务队列和并行操作，可以提高构建速度。
在这里插入图片描述

4. Rollup：

Rollup 是一个模块打包工具，它可以帮助开发者将多个模块打包成一个文件，从而提高项目的加载速度。

Rollup 支持多种模块格式，如 CommonJS、ES6 模块和 JSON 模块等。

Rollup 还可以将模块之间的依赖关系解析出来，从而优化项目的加载顺序。

Rollup 还可以将 CSS 文件转换为模块，从而支持 CSS 模块。
在这里插入图片描述

总之，Webpack、Gulp、Grunt 和 Rollup 都是常用的构建工具，它们可以帮助开发者自动执行构建、编译、测试和部署任务的工具。开发者可以根据自己的需求选择合适的构建工具。

二、 Webpack

Webpack 的功能和特点

Webpack 是一个模块打包工具，它可以帮助开发者将多个模块打包成一个文件，从而提高项目的加载速度。

以下是 Webpack 的功能和特点：

  1. 模块打包：Webpack 可以将多个模块打包成一个文件，从而减少 HTTP 请求的数量，提高项目的加载速度。
  2. 模块加载顺序优化：Webpack 可以根据模块之间的依赖关系，优化模块的加载顺序，从而提高项目的加载速度。
  3. 模块转换：Webpack 可以将模块转换为 CommonJS、ES6 模块或 JSON 模块等格式，从而支持不同的模块格式。
  4. 模块压缩：Webpack 可以将模块打包成一个文件，从而减小文件的大小，从而提高项目的加载速度。
  5. 文件监听：Webpack 可以通过文件监听机制，当文件发生变化时，自动重新构建项目。
  6. 任务队列：Webpack 可以通过任务队列机制，将多个任务放入队列中，然后依次执行，从而提高构建速度。
  7. 并行操作：Webpack 可以通过并行操作机制，将多个任务同时执行，从而提高构建速度。
  8. 插件机制：Webpack 可以通过插件机制，扩展其功能，如添加新的模块转换、压缩或打包方式等。

在这里插入图片描述

总之，Webpack 是一个功能强大的模块打包工具，可以帮助开发者提高项目的加载速度，优化模块的加载顺序，支持不同的模块格式，压缩模块文件等。开发者可以根据自己的需求选择合适的构建工具。

安装和配置 Webpack

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

  1. 安装 Node.js：Webpack 是基于 Node.js 的构建工具，因此首先需要安装 Node.js。可以从 Node.js 的官方网站下载并安装 Node.js。

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

npm install --save-dev webpack

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

  1. 配置 Webpack：安装 Webpack 后，需要创建一个配置文件。配置文件是一个 JavaScript 文件，用于配置 Webpack 的各种参数。可以通过以下命令创建一个默认的配置文件：
webpack --init

这将会在项目中创建一个名为 webpack.config.js 的配置文件。

  1. 配置项目路径：在配置文件中，需要指定项目的入口文件和输出文件。例如，假设项目的入口文件是 src/index.js，输出文件是 dist/bundle.js，则可以在配置文件中添加以下代码：
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

其中，__dirname 是 Node.js 的内置变量，表示当前模块的文件路径。

  1. 配置模块路径：在配置文件中，需要指定模块的路径。例如，假设项目中的模块都位于 src 目录下，则可以在配置文件中添加以下代码：
module.exports = {
  // ...
  resolve: {
    modules: ['src'],
  },
  // ...
};

这将会在 Webpack 中设置模块的路径，从而可以正确地找到模块文件。

  1. 配置模块转换：在配置文件中，需要指定模块的转换方式。例如，假设项目中的模块都是 ES6 模块，则可以在配置文件中添加以下代码：
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  // ...
};

这将会在 Webpack 中设置模块的转换方式，从而可以正确地转换模块文件。

  1. 配置文件监听：在配置文件中，可以通过 watch 选项配置文件监听机制。例如，可以在配置文件中添加以下代码：
module.exports = {
  // ...
  watch: {
    ignored: /node_modules/,
  },
  // ...
};

这将会在文件发生变化时自动重新构建项目。

  1. 配置任务队列：在配置文件中，可以通过 parallel 选项配置任务队列机制。例如，可以在配置文件中添加以下代码：
module.exports = {
  // ...
  parallel: 2,
  // ...
};

这将会在构建时使用并行操作，从而提高构建速度。

  1. 配置插件：在配置文件中，可以通过 plugins 选项配置插件。例如，可以在配置文件中添加以下代码：
module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
  ],
  // ...
};

这将会在构建时使用 CleanWebpackPlugin 插件，从而清除输出目录中的旧文件。

总之，安装和配置 Webpack 需要一定的 Node.js 知识和经验。开发者可以根据自己的需求选择合适的构建工具，并配置 Webpack 以满足项目的需求。

三、 Gulp

Gulp 的工作原理和优势

Gulp 是 Node.js 中的一个流行的构建工具，它可以帮助开发者自动化各种任务，如压缩文件、编译代码等。Gulp 的工作原理是基于任务的队列，它会按照任务的顺序依次执行每个任务。

以下是 Gulp 的优势：

  1. 简单易用：Gulp 的使用非常简单，只需安装 Node.js 和 Gulp，然后在项目中创建一个 gulpfile.js 文件，就可以开始使用 Gulp 了。
  2. 灵活性高：Gulp 提供了丰富的插件，可以满足各种复杂的任务需求。开发者可以根据自己的需求选择合适的插件，轻松地扩展 Gulp 的功能。
  3. 并行操作：Gulp 支持并行操作，可以同时执行多个任务，从而提高构建速度。
  4. 任务队列：Gulp 提供了任务队列机制，可以保证任务按照顺序执行，即使某个任务失败了，也不会影响其他任务的执行。
  5. 文件监听：Gulp 能够自动监听文件的更改，当文件发生变化时，会自动重新执行相应的任务。
  6. 输出日志：Gulp 提供了丰富的输出日志功能，可以帮助开发者更好地了解构建过程。

在这里插入图片描述

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

安装和配置 Gulp

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

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

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

npm install --save-dev gulp

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

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

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

const gulp = require('gulp');
const gzip = require('gulp-gzip');

gulp.task('build', function() {
  gulp.src('src/*.js')
    .pipe(gzip())
    .pipe(gulp.dest('dist'));
});

在这个例子中，gulp.src 用于指定输入文件，gulp.pipe 用于指定任务流，gulp.dest 用于指定输出文件。

  1. 配置任务队列：Gulp 支持并行操作，可以通过设置 parallel 选项来指定最大并发任务数。例如，以下代码将最大并发任务数设置为 2：
const gulp = require('gulp');
const gzip = require('gulp-gzip');

gulp.parallel(function() {
  gulp.src('src/*.js')
    .pipe(gzip())
    .pipe(gulp.dest('dist'));
}, 2);
  1. 运行 Gulp：在命令行中输入以下命令，启动 Gulp 服务器：
gulp

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

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

gulp.parallel(function() {
  gulp.src('src/*.js')
    .pipe(gzip())
    .pipe(gulp.dest('dist'));
}, 2)
  .pipe(gulp.log());

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

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

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

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

相关文章

spring常见漏洞（1）

spring常见漏洞（1）

简介 Spring的英文翻译为春天，可以说是给Java程序员带来了春天，因为它极大的简化了开发。得出一个公式：Spring 春天 Java程序员的春天 简化开发。最后的简化开发正是Spring框架带来的最大好处。 Spring是一个开放源代码的设计层面框架&a…
阅读更多...
行为型设计模式——状态模式

行为型设计模式——状态模式

状态模式 状态模式是比较简单的设计模式，它的主要作用是减少代码中大量的 if-else 或者 switch-case 等逻辑判断（俗称屎山）。它将每个状态定义为一个类，而每个状态类有自己对应的方法，因此当需要根据状态执行逻辑代码…
阅读更多...
AI语音识别模块--whisper模块

AI语音识别模块--whisper模块

1.下载 ffmpeg，挑一个自己电脑系统的版本，下载，如我win64： 地址： Releases BtbN/FFmpeg-Builds GitHub 下载压缩包zip，到本地 解压安装，其实无需安装，只需把对应的目录下的bin&…
阅读更多...
采用不同的方式，合并多个文件为一个文件。其中包括：Java方法，Windows脚本，CMD命令

采用不同的方式，合并多个文件为一个文件。其中包括：Java方法，Windows脚本，CMD命令

1. 批处理命令 可以实现不同文件的合并，将文件拖入这个命令即可。 echo off setlocal enabledelayedexpansionset "outputFilemerged_output.txt"rem Check if the output file already exists and delete it if exist "%outputFile%" del &qu…
阅读更多...
阿尔泰科技——PXIe8912/8914/8916高速数据采集卡

阿尔泰科技——PXIe8912/8914/8916高速数据采集卡

阿尔泰科技PXIe8912/8914/8916高速数据采集卡是2通道同步采样数字化仪，专为输入信号高达 100M 的高频和高动态范围的信号而设计。 与Labview无缝连接，提供图形化API函数。模拟输入范围可以通过软件编程设置为1V 或者5V。配备了容量高达 2GB的板载内存。…
阅读更多...
JAVA数组以及小练习

JAVA数组以及小练习

目录 数组的概述和静态初始化 数组的地址值和元素访问 数组的遍历 数组的动态初始化 数组练习 数组的概述和静态初始化 package 数组;public class array1 {public static void main(String[] args){//格式//静态初始化//数据类型 [] 数组名 new 数组类型[]{元素1&#xf…
阅读更多...
第8章-第4节-Java中字节流的缓冲流

第8章-第4节-Java中字节流的缓冲流

1、缓冲流：属于高级IO流，并不能直接读写数据，需要依赖于基础流。缓冲流的目的是为了提高文件的读写效率？那么是如何提高文件的读写效率的呢？ 在内存中设置一个缓冲区，缓冲区的默认大小是8192字节&#xff…
阅读更多...
Vue面试之v-if与v-show的区别

Vue面试之v-if与v-show的区别

Vue面试之v-if与v-show的区别 DOM渲染初始渲染性能切换开销标签配合源码实现 最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~ 作为Vue中两种条件性渲染元…
阅读更多...
IaC基础设施即代码：Windows 部署 Terraform

IaC基础设施即代码：Windows 部署 Terraform

目录 一、实验 1.环境 2.Windows 部署 Terraform 3.VS Code 部署 Terraform插件 二、问题 1.Terraform有哪些功能 2.Chocolatey有何作用 一、实验 1.环境 （1）主机 表1-1 主机 主机系统目标软件工具备注jia Windows 11 Terraform 1.6.6 Power…
阅读更多...
推荐两款好用的卫星地图。

推荐两款好用的卫星地图。

问题描述：推荐两款好用的卫星地图。 问题解决：谷歌地球、高德卫星地图。个人感觉谷歌地球好用一些。
阅读更多...
inflate流程分析

inflate流程分析

一.inflate的三参数重载方法else里面逻辑 我们先看到setContentView里面的inflate的调用链： public View inflate(LayoutRes int resource, Nullable ViewGroup root) {return inflate(resource, root, root ! null);}public View inflate(LayoutRes int resource…
阅读更多...
吸嘴旋转对位贴合

吸嘴旋转对位贴合

背景：高精度贴片机需要在上看相机视觉定位芯片，芯片准确的贴合到Lead Frame里面。 问题：已知视觉相机给出的芯片中心位置A1(x1,y1)，角度θ1，吸嘴中心的位置A2（x2，y2），需…
阅读更多...
【小白专用】C#关于角色权限系统

【小白专用】C#关于角色权限系统

（C#）用户、角色、权限 https://www.cnblogs.com/huangwen/articles/638050.html 权限管理系统——数据库的设计（一） https://www.cnblogs.com/cmsdn/p/3371576.html 权限管理系统——菜单模块的实现（二） …
阅读更多...
金蝶云星空与金蝶云星空对接集成逐个单据查询连通员工新增(3009-销售退货清理卡片)

金蝶云星空与金蝶云星空对接集成逐个单据查询连通员工新增(3009-销售退货清理卡片)

金蝶云星空与金蝶云星空对接集成逐个单据查询连通员工新增(3009-销售退货清理卡片) 来源系统:金蝶云星空 金蝶K/3Cloud（金蝶云星空）是移动互联网时代的新型ERP，是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人…
阅读更多...
关于java的冒泡排序

关于java的冒泡排序

关于java的冒泡排序 我们前面的文章中了解到了数组的方法类Arrays，我们本篇文章来了解一下最出名的排序算法之一，冒泡排序！😀 冒泡排序的代码还是非常简单的，两层循环，外层冒泡轮数，里层依次比…
阅读更多...
UL2034详细介绍UL 安全单站和多站一氧化碳报警器标准

UL2034详细介绍UL 安全单站和多站一氧化碳报警器标准

在介绍相关标准之前先介绍一下UL认证和UL测试报告的区别，检测认证行业6年老司机 UL认证是自愿性的认证，需要检测产品和审核工厂，每个季度审核一次，费用高、时间久，而且审厂非常的严格。 UL测试报告是根据产品选用相应…
阅读更多...
KIBANA可视化管理界面说明

KIBANA可视化管理界面说明

更说明转自https://blog.csdn.net/IT_ZRS/article/details/125496588 1 主要结构功能 使用浏览器访问 ip:5601 默认端口，进入首页 Discover：日志管理视图 主要进行搜索和查询Visualize：统计视图 构建可视化的图表Dashboard&#xf…
阅读更多...
PaddleSeg学习4——paddle模型使用TensorRT推理（c++）

PaddleSeg学习4——paddle模型使用TensorRT推理（c++）

paddle模型使用TensorRT推理 1 模型末端添加softmax和argmax算子2 paddle模型转onnx模型3 onnx模型转TensorRT模型3.1 安装TensorRT-8.5.3.13.2 使用 trtexec 将onnx模型编译优化导出为engine模型 4 TensorRT模型推理测试5 完整代码6 测试结果 1 模型末端添加softmax和argmax算…
阅读更多...
C++编码规范：JSF-AV（未完待续）

C++编码规范：JSF-AV（未完待续）

联合打击战斗机计划（英语：Joint Strike Fighter Program，简称JSF）是一个由美国和其盟国发起的新一代战斗机发展和采购项目。该项目旨在取代大量已老化的战斗机、战斗轰炸机和攻击机。该项目计划在未来取代各种西方主力战机&#x…
阅读更多...
开通微信商家转账到零钱怎么做？场景模板

开通微信商家转账到零钱怎么做？场景模板

商家转账到零钱是什么？ 商家转账到零钱功能是指商家可以通过支付平台将资金直接转账到用户的零钱账户中。在这种情况下，商家不需要用户提供银行账户信息，而是使用支付平台的转账功能将资金直接转移到用户的零钱账户中。 商家转账到零钱的使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023