当前位置: 首页 > news >正文

第21节课:前端构建工具—自动化与模块化的利器

目录

    • 前端构建工具的重要性
    • 任务运行器:Gulp与Grunt
      • Gulp
        • Gulp的工作原理
        • 安装与使用Gulp
      • Grunt
        • Grunt的工作原理
        • 安装与使用Grunt
    • 模块打包器:Webpack
      • Webpack简介
        • Webpack的工作原理
        • 安装与使用Webpack
    • 实践:使用Gulp和Webpack构建前端项目
      • 示例:使用Gulp进行自动化任务
      • 示例:使用Webpack打包模块
    • 结语

随着前端项目的复杂度不断增加,手动处理各种任务变得既耗时又容易出错。前端构建工具的出现,极大地提高了开发效率和代码质量。本节课将介绍前端构建工具中的任务运行器(如Gulp、Grunt)和模块打包器(如Webpack),探讨它们的作用、特点和使用方法。

前端构建工具的重要性

前端构建工具可以帮助开发者自动化各种重复性任务,如文件压缩、代码合并、图像优化、自动刷新等。此外,模块打包器还能帮助我们管理复杂的依赖关系,使代码更加模块化和可维护。

任务运行器:Gulp与Grunt

Gulp

Gulp是一个基于流的自动化构建工具,它通过代码配置任务,使得任务的定义和执行更加灵活和高效。

Gulp的工作原理

Gulp使用Node.js的流(Streams)来处理文件,这意味着文件在磁盘上的读写操作可以被流式处理,从而提高性能。

安装与使用Gulp
  1. 安装Gulp:通过npm安装Gulp。

    bash复制

    npm install --global gulp-cli
    npm install --save-dev gulp
    
  2. 创建gulpfile.js:在项目根目录下创建gulpfile.js,并定义任务。

    JavaScript复制

    const gulp = require('gulp');function clean() {return gulp.src('dist', { read: false }).pipe(clean());
    }exports.clean = clean;
    
  3. 运行任务:在命令行中运行Gulp任务。

    bash复制

    gulp clean
    

Grunt

Grunt是另一个流行的前端构建工具,它通过配置文件来定义任务。

Grunt的工作原理

Grunt使用配置文件(Gruntfile.js)来定义任务,每个任务都有自己的配置和执行逻辑。

安装与使用Grunt
  1. 安装Grunt:通过npm安装Grunt。

    bash复制

    npm install --global grunt-cli
    npm install --save-dev grunt
    
  2. 创建Gruntfile.js:在项目根目录下创建Gruntfile.js,并定义任务。

    JavaScript复制

    module.exports = function(grunt) {grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},build: {src: 'src/<%= pkg.name %>.js',dest: 'build/<%= pkg.name %>.min.js'}}});grunt.loadNpmTasks('grunt-contrib-uglify');grunt.registerTask('default', ['uglify']);
    };
    
  3. 运行任务:在命令行中运行Grunt任务。

    bash复制

    grunt
    

模块打包器:Webpack

Webpack简介

Webpack是一个模块打包器(Module Bundler),它可以将项目中的所有依赖项(如JavaScript、CSS、图片等)打包成一个或多个bundle。

Webpack的工作原理

Webpack通过分析项目中的模块依赖关系,将它们打包成一个或多个bundle。它使用loader来处理不同类型的文件,并使用plugin来扩展其功能。

安装与使用Webpack
  1. 安装Webpack:通过npm安装Webpack。

    bash复制

    npm install --save-dev webpack webpack-cli
    
  2. 创建webpack.config.js:在项目根目录下创建webpack.config.js,并配置Webpack。

    JavaScript复制

    const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
    };
    
  3. 运行Webpack:在命令行中运行Webpack。

    bash复制

    npx webpack --config webpack.config.js
    

实践:使用Gulp和Webpack构建前端项目

示例:使用Gulp进行自动化任务

HTML复制

<!DOCTYPE html>
<html>
<head><title>Gulp自动化任务示例</title>
</head>
<body><h1>欢迎使用Gulp</h1><p>这是一个简单的Gulp自动化任务示例。</p>
</body>
</html>

示例:使用Webpack打包模块

JavaScript复制

// src/index.js
import './style.css';console.log('Hello, Webpack!');

css复制

/* src/style.css */
body {background-color: #f0f0f0;
}

结语

前端构建工具如Gulp、Grunt和Webpack,为前端开发带来了极大的便利。通过自动化任务和模块打包,开发者可以更加专注于代码本身,而不是繁琐的构建过程。掌握这些工具,将使你在前端开发领域更加得心应手。继续探索这些工具的高级功能和最佳实践,你将能够构建出更加高效和可维护的前端项目。

相关文章:

第21节课:前端构建工具—自动化与模块化的利器

目录 前端构建工具的重要性任务运行器&#xff1a;Gulp与GruntGulpGulp的工作原理安装与使用Gulp GruntGrunt的工作原理安装与使用Grunt 模块打包器&#xff1a;WebpackWebpack简介Webpack的工作原理安装与使用Webpack 实践&#xff1a;使用Gulp和Webpack构建前端项目示例&…...

企业SaaS(软件即服务)行业中AARRR

获取&#xff08;Acquisition&#xff09; 通过各种渠道吸引用户。 社交媒体广告&#xff1a;Facebook、Instagram等平台的广告。 内容营销&#xff1a;通过博客、视频等吸引用户。 SEO优化&#xff1a;提高网站在搜索引擎中的排名。 合作营销&#xff1a;与其他企业合作进行交…...

为什么要学习rust

内存管理&#xff1a;对于我来说&#xff0c;我就喜欢它的内存管理。我做了一个webapi&#xff0c;取100万行数据&#xff0c;导出到xlsx&#xff0c;再把这个xlsx文件发送给前端。分别用了java、c#、go和rust进行了相同的操作。只有rust做到了&#xff0c;启动时8MB内存&#…...

观察者模式和订阅发布模式的关系

有人把观察者模式等同于发布订阅模式&#xff0c;也有人认为这两种模式存在差异&#xff0c;本质上就是调度的方法不同。 发布订阅模式: 观察者模式: 相比较&#xff0c;发布订阅将发布者和观察者之间解耦。&#xff08;发布订阅有调度中心处理&#xff09;...

基于STM32的智能温控花盆设计

目录 引言系统设计 硬件设计软件设计 系统功能模块 空气质量传感器模块数据处理与分析模块实时显示与用户交互模块报警与提示模块远程监控与数据上传模块 控制算法 空气质量数据处理与分析算法异常检测与报警算法数据上传与历史数据回溯算法 代码实现 空气质量检测与数据处理代…...

OpenAI-Edge-TTS:本地化 OpenAI 兼容的文本转语音 API,免费高效!

文本转语音&#xff08;TTS&#xff09;技术已经成为人工智能领域的重要一环&#xff0c;无论是语音助手、教育内容生成&#xff0c;还是音频文章创作&#xff0c;TTS 工具都能显著提高效率。今天要为大家介绍的是 OpenAI-Edge-TTS&#xff0c;一款基于 Microsoft Edge 在线文本…...

P4681 [THUSC 2015] 平方运算 Solution

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1​,a2​,⋯,an​) 和常数 p p p &#xff0c;有 m m m 个操作&#xff0c;分以下两种&#xff1a; modify ⁡ ( l , r ) \operatorname{modify}(l,r) modify(l,r)&#xff1a;对每个 i ∈ [ …...

【apt源】RK3588 平台ubuntu20.04更换apt源

RK3588芯片使用的是aarch64架构&#xff0c;因此在Ubuntu 20.04上更换apt源时需要使用针对aarch64架构的源地址。以下是针对RK3588芯片在Ubuntu 20.04上更换apt源到清华源的正确步骤&#xff1a; 步骤一&#xff1a;打开终端 在Ubuntu 20.04中&#xff0c;按下Ctrl Alt T打…...

Angular 2 表单深度解析

Angular 2 表单深度解析 引言 Angular 2作为现代前端开发的框架之一,以其灵活性和强大的功能赢得了众多开发者的青睐。在Angular 2中,表单处理是其中一个重要且复杂的部分。本文将深入解析Angular 2的表单,从基础知识到高级应用,旨在帮助开发者更好地理解和运用Angular 2…...

PHP 7 新特性

PHP 7 新特性 引言 PHP 作为一种广泛使用的服务器端脚本语言,自1995年诞生以来,已经经历了多个版本的迭代。PHP 7 是 PHP 的发展历程中的一个重要里程碑,它带来了许多新特性和改进,旨在提高性能、增强安全性和简化开发过程。本文将详细介绍 PHP 7 的新特性,帮助开发者更…...

vim如何解决‘’文件非法关闭后,遗留交换文件‘’的问题

过程描述&#xff1a; 由于我修改文件时&#xff08;一定得修改了文件&#xff0c;不做任何修改不会产生这个问题&#xff09;的非法关闭&#xff0c;比如直接关闭虚拟机&#xff0c;或者直接断开远程工具的远程连接&#xff0c;产生了以下遗留交换文件的问题&#xff1a; 点击…...

【练习】树形dp

G. Group Homework time limit per test: 3 s memory limit per test: 512 MB input: standard input output: standard output No, we don’t want group homework. It’s the place where KaTeX parse error: Expected EOF, got & at position 7: 1 1 &̲lt; 1 …...

Mybatis是如何进行分页的?

大家好&#xff0c;我是锋哥。今天分享关于【Mybatis是如何进行分页的&#xff1f;】面试题。希望对大家有帮助&#xff1b; Mybatis是如何进行分页的&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MyBatis 实现分页的方式有很多种&#xff0c;最常见…...

【新春特辑】2025年春节技术展望:蛇年里的科技创新与趋势预测

&#x1f525;【新春特辑】2025年春节技术展望&#xff1a;蛇年里的科技创新与趋势预测 &#x1f4c5; 发布日期&#xff1a;2025年01月29日&#xff08;大年初一&#xff09; 在这个辞旧迎新的美好时刻&#xff0c;我们迎来了充满希望的2025年&#xff0c;也是十二生肖中的蛇…...

论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(五)

Understanding Diffusion Models: A Unified Perspective&#xff08;五&#xff09; 文章概括基于得分的生成模型&#xff08;Score-based Generative Models&#xff09; 文章概括 引用&#xff1a; article{luo2022understanding,title{Understanding diffusion models: A…...

C++并发:C++内存模型和原子操作

C11引入了新的线程感知内存模型。内存模型精确定义了基础构建单元应当如何被运转。 1 内存模型基础 内存模型牵涉两个方面&#xff1a;基本结构和并发。 基本结构关系到整个程序在内存中的布局。 1.1 对象和内存区域 C的数据包括&#xff1a; 内建基本类型&#xff1a;int&…...

JavaScript函数中this的指向

总结&#xff1a;谁调用我&#xff0c;我就指向谁&#xff08;es6箭头函数不算&#xff09; 一、ES6之前 每一个函数内部都有一个关键字是 this &#xff0c;可以直接使用 重点&#xff1a; 函数内部的 this 只和函数的调用方式有关系&#xff0c;和函数的定义方式没有关系 …...

【java学习笔记】@Autowired注解 使用方法和作用 | 配合@Component注解使用 | IOC控制反转

原本在类中&#xff0c;要用什么对象&#xff0c;就直接new一个对象。这种原始的方式 是由应用本身去控制实例的。 用了Autowired注解后&#xff0c;就相当于把实例&#xff08;对象&#xff09;的控制权 交给外部容器来统一管理&#xff08;降低耦合&#xff09;。&#xff08…...

数论问题76一一容斥原理

容斥原理是一种计数方法&#xff0c;用于计算多个集合的并集中元素的个数&#xff0c;以避免重复计算。以下是其基本内容及相关公式&#xff1a; 两个集合的容斥原理 若有集合A和集合B&#xff0c;那么A与B的并集中元素的个数等于A集合元素个数加上B集合元素个数&#xff0c;再…...

python-leetcode-从中序与后序遍历序列构造二叉树

106. 从中序与后序遍历序列构造二叉树 - 力扣&#xff08;LeetCode&#xff09; # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right r…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...