利用gulp工具对常规web项目进行压缩打包

前言

对于一个常规的web项目,如下项目目录

|- imgs
|	- img1.png
|	- img2.png
|- js
|	- user.js
|	- utils.js
|- css
|	- index.css
|	- user.css
|- html
|	- user.html
|- index.html

可以使用各种构建工具(如webpack、gulp、grunt等)来打包这个项目,这些工具可以对html、css、js文件进行压缩,以及优化图片等。
下面介绍用gulp工具来进行项目打包,它算是比较简单实用的一种工具,容易上手。

一、 项目初始化

首先,在项目根目录,初始化项目,生成一个package.json文件

npm init

npm init

二、安装gulp

全局安装gulp,通过它执行gulp任务

npm install -g gulp

本地安装gulp,用于调用gulp插件的功能

npm install --save-dev gulp

查看gulp版本
查看gulp版本

三、安装gulp插件

gulp-htmlmin:html压缩
gulp-clean-css:css压缩
gulp-uglify:js压缩
gulp-imagemin:图片压缩

npm install --save-dev gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin

安装成功后可以在 package.json 中看到各插件的版本
各插件版本

四、配置gulp任务

在项目根目录新建 gulpfile.js 文件,在此文件中配置压缩打包的任务,具体配置如下:

// ES6语法引入各插件
import gulp from 'gulp'
import uglify from 'gulp-uglify'
import cleanCSS from 'gulp-clean-css'
import htmlmin from 'gulp-htmlmin'
import imagemin from 'gulp-imagemin'// 配置js文件压缩任务
gulp.task('minify-js', function () {return gulp.src('js/*.js') // 文件匹配路径语法可参考:https://marco-hui.github.io/JavaScript-outline/expand/skill/gulp.html#globs%E8%AF%AD%E6%B3%95.pipe(uglify()).pipe(gulp.dest('dist/js'))
})// 配置css文件压缩任务
gulp.task('minify-css', function () {return gulp.src('css/*.css').pipe(cleanCSS({ compatibility: 'ie8' })).pipe(gulp.dest('dist/css'))
})// 配置html文件压缩任务
gulp.task('minify-index-html', function () {return gulp.src('index.html').pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist'))
})
gulp.task('minify-html', function () {return gulp.src('html/*.html').pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist/html'))
})// 配置图片压缩任务
gulp.task('minify-images', function () {return gulp.src('imgs/**/*').pipe(imagemin()).pipe(gulp.dest('dist/imgs'))
})// 将以上任务组合成一个总任务,执行时只需要执行总任务即可
gulp.task('default', gulp.series('minify-js', 'minify-css', 'minify-index-html', 'minify-html', 'minify-images'))

有关 gulp 的语法和工作流程可参考此处

五、执行任务及报错处理

最后待代码开发完毕后,在项目根目录打开命令窗口执行

 gulp <任务名>

即可执行相应任务,若没有指定任务名,会默认执行 ‘default’ 任务,上面我们已经配置了总任务‘default’,所以直接执行 gulp 即可。
这里我们在package.json中配置一个打包指令,如下所示:

// package.json
{..."scripts": {"build": "gulp"},
}

配置后,执行 npm run build 进行打包。
但此时执行应该会报错:
gulp执行报错
报错原因是不能在模块外使用 import 语句。gulpfile.js中我们用到 import 引入所有依赖,但在 node.js 环境中默认使用的是 CommonJS 规范,import 是 ES6 中的模块化写法,CommonJS 模块与 ES6 模块不兼容,所以需要使用 require 语句进行导入。

下面介绍两种方法解决这个问题:

方法1:依旧使用 import 引入

若依旧想要使用 import ,可以在 package.json 中配置 "type": "module", 则会将gulpfile.js 以ES模块进行处理。

// package.json
{..."type": "module"
}

配置后,就可以正常打包了。
任务执行情况
打包成功后,会在你的项目根目录自动生成一个dist目录,里面存放的就是压缩后的各个文件,对比查看压缩效果如下图所示
对比查看压缩效果

方法2:改用 require 引入

如果使用 import 语法依然有问题,那就改用 require 语法引入各插件

// gulpfile.js
// CommonJS语法引入各插件
var gulp = require('gulp')
var uglify = require('gulp-uglify')
var cleanCSS = require('gulp-clean-css')
var htmlmin = require('gulp-htmlmin')
var imagemin = require('gulp-imagemin')

相应的 package.json 中也不需要配置 "type": "module" 了,删掉此行。

此时运行打包,可能会报以下错误:
gulp-imagemin引入错误
这里的报错是说 gulp-imagemin 这个插件是ES模块,不支持使用 require 语法引用。
从 npm 官网查看此插件可知,gulp-imagemin 从v8.0.0版本开始使用 import 语法引入,如果要用 require,那就要把插件降级到此版本之前。

gulp-imagemin版本对比
因此,把gulp-imagemin 卸载并重新安装指定版本 gulp-imagemin@7.1.0

// 卸载gulp-imagemin
npm uninstall gulp-imagemin
// 安装gulp-imagemin@7.1.0
npm i --save-dev gulp-imagemin@7.1.0

降级完成后,执行 npm run build 打包,也可以正常的对项目文件进行压缩打包了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux第29步_虚拟机连接(与主机断开连接)U盘选项为灰色解决方法

在WIN11中&#xff0c;虚拟机“连接(与主机断开连接)U盘”选项为灰色&#xff0c;解决方法如下&#xff1a; 1、关闭虚拟机电源&#xff0c;得到下面的界面&#xff1a; 2、根据上述提示&#xff0c;找到虚拟机所在磁盘 3、配置文件属性见下图&#xff1a; 4、使用记事本打开…

关于达梦DMHS同步性能提升的几个参数介绍

1、事务缓存相关参数 EXEC模块在处理事务时&#xff0c;首先要对事务数据进行收集归类&#xff0c;通过事务ID把同一个事务的操作都归到一起。EXEC模块在初始化时&#xff0c;根据exec_sql参数指示的内存池大小来初始化内存池&#xff0c;收集事务操作时&#xff0c;都将从该内…

二、安全与风险管理—业务连续性计划(BCP)和灾难恢复计划(DRP)需求

目录 一、业务连续性计划(BCP) 1.业务连续的重要性和一些名词的定义 2.BCP的目的和标准

基于stm32f4的蓝牙控制小车

1. 引言 蓝牙的创始人是瑞典爱立信公司&#xff0c;蓝牙技术是一种无限数据与语音通信的开放性全球规范&#xff0c;它以低成本的近距离无线连接为基础&#xff0c;为固定与移动设备通信环境建立一个特别连接。手机之间通过蓝牙实现数据共享成为常理&#xff0c;将手机变为遥…

共融共生:智慧城市与智慧乡村的协调发展之路

随着科技的飞速发展和全球化的不断深入&#xff0c;智慧城市和智慧乡村作为现代社会发展的重要组成部分&#xff0c;正逐渐成为人们关注的焦点。然而&#xff0c;在追求经济发展的过程中&#xff0c;城乡发展不平衡的问题也日益凸显。因此&#xff0c;如何实现智慧城市与智慧乡…

【设计模式-04】Factory工厂模式

简要描述 简单工厂静态工厂工厂方法 FactoryMethod 产品维度扩展 抽象工厂 产品一族进行扩展Spring IOC 一、工厂的定义 任何可以产生对象的方法或类&#xff0c;都可以称之为工厂单例也是一种工厂不可咬文嚼字&#xff0c;死扣概念为什么有了new之后&#xff0c;还要有工厂&am…

oracle 12c pdb expdp/impdp 数据导入导出

环境 (源)rac 环境 byoradbrac 系统版本&#xff1a;Red Hat Enterprise Linux Server release 6.5 软件版本&#xff1a;Oracle Database 12c Enterprise Edition Release 12.1.0.2.0 - 64bit byoradb1&#xff1a;172.17.38.44 byoradb2&#xff1a;172.17.38.45 (目的&am…

轻松上手Linux文件操作:五种方法教你创建文件

轻松上手Linux文件操作&#xff1a;五种方法教你创建文件 一、引言二、使用touch命令创建文件三、使用文本编辑器创建文件四、使用echo命令创建文件五、使用cat命令创建文件六、使用重定向符号创建文件七、总结 一、引言 本文介绍五种在Linux系统中创建文件的方法&#xff0c;…

Dayjs使用

官方文档&#xff1a;安装 | Day.js中文网 相对moment.js而已&#xff0c;day.js的体积更小&#xff0c;只有2KB左右&#xff1b;moment.min.js 有16.7KB。 常用方法&#xff1a; import dayjs from dayjs;// 格式化 console.log(dayjs().format(YYYY-MM-DD HH:mm:ss)); // 2…

缓存解析:从架构设计到Redis应用及最佳实践

典型架构设计中缓存的存储位置 在现代软件架构中&#xff0c;缓存是优化数据检索、提高应用性能的关键组件。缓存的存储位置多种多样&#xff0c;每个位置针对特定的优化目标和需求。理解这些层级对于设计高效的系统至关重要。 浏览器缓存&#xff1a;这是最接近用户端的缓存层…

公共用例库计划--个人版(三)导出Excel功能

1、任务概述 本次计划的核心任务是开发一个&#xff0c;个人版的公共用例库&#xff0c;旨在将各系统和各类测试场景下的通用、基础以及关键功能的测试用例进行系统性地归纳整理&#xff0c;并以提高用例的复用率为目标&#xff0c;力求最大限度地减少重复劳动&#xff0c;提升…

Docker Compose 部署 jenkins

Docker Compose 部署 jenkins jenkins 部署 Docker-Compose 部署 version: 3.1 services:jenkins:image: jenkinsci/blueoceanvolumes:- /data/jenkins/:/var/jenkins_home- /var/run/docker.sock:/var/run/docker.sock- /usr/bin/docker:/usr/bin/docker- /usr/lib/x86_64-…

网络层协议及IP编址与IP路由基础华为ICT网络赛道

目录 4.网络层协议及IP编址 4.1.网络层协议 4.2.IPv4地址介绍 4.3.子网划分 4.4.ICMP协议 4.5.IPv4地址配置及基本应用 5.IP路由基础 5.1.路由概述 5.2.静态路由 5.3.动态路由 5.4.路由高阶特性 4.网络层协议及IP编址 4.1.网络层协议 IPv4(Internet Protocol Versi…

第二百六十二回

文章目录 概念介绍使用方法示例代码使用扩展 我们在上一章回中介绍了flutter_screenutil包相关的内容&#xff0c;本章回中将介绍dart中的setter/getter方法.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在这里介绍的setter/getter方法属于编程语言中的知识…

Android MediaCodec 简明教程(一):使用 MediaCodecList 查询 Codec 信息,并创建 MediaCodec 编解码器

系列文章目录 文章目录 系列文章目录前言一、MediaCodecList 是什么&#xff1f;二、MediaCodecList 使用方法1. 获取 MediaCodecList 实例2. 列出设备上支持的编解码器3. 获取编解码器详细信息4. 判断设备是否支持某种编解码器5. 查询默认的编解码器 三、通过 MediaCodecList …

【Java 设计模式】设计原则之开放封闭原则

文章目录 1. 定义2. 好处3. 应用4. 示例结语 在软件开发中&#xff0c;设计原则是创建灵活、可维护和可扩展软件的基础。 这些原则为我们提供了指导方针&#xff0c;帮助我们构建高质量、易理解的代码。 ✨单一职责原则&#xff08;SRP&#xff09; ✨开放/封闭原则&#xff08…

69、python - 利用向量内积来优化卷积运算

上一节介绍了利用 python 实现的原始卷积版本性能很差的原因,不知道各位同学有尝试的么? 这一节介绍下如何对卷积的乘累加进行一次优化:我们利用 np.dot 来进行优化。 np.dot np.dot 是 numpy 库提供的一个函数,用来计算两个向量的点积,或者叫内积。那什么是内积呢? …

Pygame程序的屏幕显示

不同对象的绘制与显示过程 在Pygame中&#xff0c;需要将所有需要在屏幕上显示的内容都绘制在一个display surface上。该Surface通常称为screen surface&#xff0c;它是pygame.display.set_mode()函数返回的Surface对象。 在绘制不同对象时&#xff0c;可以使用不同的绘制方…

AI绘画软件Stable Diffusion模型/Lora/VAE文件存放位置

型下载说明&#xff08;下载模型后输入对应参数即可生成&#xff09; 建议直接去civitai.com找模型&#xff0c;如果无法找到可以在幕后模型区找也可以去&#xff0c; 下载好后放入对应的文件夹。进入127.0.0.1:7680 左上角刷新即可看到新的模型。 模型种类 大模型 大模型特…

计算机找不到msvcr100.dll的多种解决方法分享,轻松解决dll问题

msvcr100.dll作为系统运行过程中不可或缺的一部分&#xff0c;它的主要功能在于提供必要的运行时支持&#xff0c;确保相关应用程序能够顺利完成编译和执行。因此&#xff0c;当操作系统或应用程序在运行阶段搜索不到该文件时&#xff0c;自然会导致各类依赖于它的代码无法正常…