当前位置：网站首页 > 编程网 > 正文

Gulp 使用gulp压缩CSS css压缩工具

yuyutoo 2024-10-22 18:46 6 浏览 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 文件。

gulp

上一篇：MS软件模块翻译-设置GULP计算 ms软件模块翻译-设置gulp计算手册
下一篇：Gulp 第一个Gulp任务光遇姆明季第一个任务怎么做

Gulp 使用gulp压缩CSS css压缩工具

压缩CSS文件

安装插件

在gulpfile.js文件中编写代码

示例：

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

推荐7个模板代码和其他游戏源码下载的网址

其实模版网站在开发工作中很重要，推荐几个参考站给大家

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源带详细搭建教程

Gulp 使用gulp压缩CSS css压缩工具

压缩CSS文件

安装插件

在gulpfile.js文件中编写代码

示例：

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

推荐7个模板代码和其他游戏源码下载的网址

其实模版网站在开发工作中很重要，推荐几个参考站给大家

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源 带详细搭建教程

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程