Gulp 使用gulp压缩CSS css压缩工具
yuyutoo 2024-10-22 18:46 1 浏览 0 评论
我们除了可以使用 gulp 压缩 JS 文件，还可以压缩 CSS，压缩 CSS 代码可以降低 CSS 文件的大小，提高网页的打开速度。
压缩CSS文件
使用 gulp 来压缩 CSS 文件的操作步骤和压缩 JS 文件差不多，前面我们学习了如何压缩 JS 文件，那么再学习压缩 CSS 文件就会觉得很简单啦。
压缩 CSS 文件同样需要用到相应的插件，关于 gulp 的 CSS 压缩插件，一共有如下三个：
- gulp-cssnano
- gulp-minify-css
- gulp-clean-css
上面三个插件，因为 gulp-minify-css 现在已经被标记为 deprecated，因为我们可以使用其余两个插件。
例如我们所有的 .css 文件压缩到 dist 目录下的 css 文件夹中，具体操作如下所示。
安装插件
首先安装 gulp-clean-css 插件，命令如下所示：
npm install gulp-clean-css
如下图所示：
在gulpfile.js文件中编写代码
插件安装成功后，我们就可以在 gulpfile.js 文件中编写代码。
示例：
// 获取 gulp
var gulp = require('gulp')
var cleancss = require('gulp-clean-css')
gulp.task('testcss', function(cb) {
gulp.src('css/*.css')
.pipe(cleancss())
.pipe(gulp.dest('dist/css'))
cb()
})
运行 gulp testcss 命令，压缩 CSS 文件：
此时项目根目录下的 dist 目录中会生成一个 CSS 文件夹，被压缩的 CSS 文件就放在这个文件夹中。
gulp-cssnano 插件的使用与上述步骤类似，这里就不一一演示啦，大家可以自己安装 gulp-cssnano 插件，还要将 gulp-clean-css 替换成 gulp-cssnano 插件，运行命令，同样可以成功压缩 CSS 文件。
相关推荐
- mysql数据库如何快速获得库中无主键的表
-
概述总结一下MySQL数据库查看无主键表的一些sql,一起来看看吧~1、查看表主键信息--查看表主键信息SELECTt.TABLE_NAME,t.CONSTRAINT_TYPE,c.C...
- 一文读懂MySQL的架构设计
-
MySQL是一种流行的开源关系型数据库管理系统，它由四个主要组件构成:协议接入层...
- MySQL中的存储过程和函数
-
原文地址：https://dwz.cn/6Ysx1KXs作者：best.lei存储过程和函数简单的说，存储过程就是一条或者多条SQL语句的集合。可以视为批文件，但是其作用不仅仅局限于批处理。本文主要介...
- 创建数据表:MySQL 中的 CREATE 命令深入探讨
-
数据库是企业日常运营和业务发展的不可缺少的基石。MySQL是一款优秀的关系型数据库管理系统，它支持数据的插入、修改、查询和删除操作。在数据库中，表是一个关系数据库中用于保存数据的容器，它由表定义、表...
- SQL优化——IN和EXISTS谁的效率更高
-
IN和EXISTS被频繁使用在SQL中，虽然作用是一样的，但是在使用效率谁更高这点上众说纷纭。下面我们就通过一组测试来看，在不同场景下，使用哪个效率更高。...
- 在MySQL中创建新的数据库，可以使用命令，也可以通过MySQL工作台
-
摘要：在本教程中，你将学习如何使用MySQLCREATEDATABASE语句在MySQL数据库服务器上创建新数据库。MySQLCREATEDATABASE语句简介...
- SQL查找是否"存在"，别再用count了
-
根据某一条件从数据库表中查询『有』与『没有』，只有两种状态，那为什么在写SQL的时候，还要SELECTCOUNT(*)呢?无论是刚入道的程序员新星，还是精湛沙场多年的程序员老白，都是一如既往...
- 解决Mysql数据库提示innodb表不存在的问题
-
发现mysql的error.log里面有报错：>InnoDB:Error:Table"mysql"."innodb_table_stats"notfo...
- Mysql实战总结&面试20问
-
1、MySQL索引使用注意事项1.1、索引哪些情况会失效查询条件包含or，可能导致索引失效如果字段类型是字符串，where时一定用引号括起来，否则索引失效...
- MySQL创建数据表
-
数据库有了后，就可以在库里面建各种数据表了。创建数据表的过程是规定数据列的属性的过程，同时也是实施数据完整性（包括实体完整性、引用完整性和域完整性）约束的过程。后面也是通过SQL语句和Navicat...
- MySQL数据库之死锁与解决方案
-
一、表的死锁产生原因:...
- MySQL创建数据库
-
我的重点还是放在数据表的操作，但第一篇还是先介绍一下数据表的容器数据库的一些操作。主要涉及数据库的创建、修改、删除和查看，下面演示一下用SQL语句创建和用图形工具创建。后面主要使用的工具是Navica...
- MySQL中创建触发器需要执行哪些操作?
-
什么是触发器触发器，就是一种特殊的存储过程。触发器和存储过程一样是一个能够完成特定功能、存储在数据库服务器上的SQL片段，但是触发器无需调用，当对数据库表中的数据执行DML操作时自动触发这个SQL片段...
- 《MySQL 入门教程》第 17 篇 MySQL 变量
-
原文地址：https://blog.csdn.net/horses/article/details/107736801原文作者：不剪发的Tony老师来源平台：CSDN变量是一个拥有名字的对象，可以用于...
- 关于如何在MySQL中创建表，看这篇文章就差不多了
-
数据库技术是现代科技领域中至关重要的一部分，而MySQL作为最流行的关系型数据库管理系统之一，在数据存储和管理方面扮演着重要角色。本文将深入探讨MySQL中CREATETABLE语句的应用，以及如何...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)