使用Gulp压缩CSS

1. 前言
2. 正文
3. 后记

前言

css、js写好了，不压缩的话虽然不会对访问速度产生太大影响，但多多少少延长了加载时间。日常使用Vue、React、Nuxt等这些框架，在构建时会自动帮我们压缩好静态资源。但如果我们手搓一个纯静态HTML文件，那css要么是使用网页版的一些压缩工具要么是使用本文提到的这个Gulp。

正文

这个插件依赖于Node.js，nodejs就自行下载安装了。

认识Gulp

先来认识一下gulp

gulp官网有这么一句话，说白了就是压缩文件的。

初始化项目

我们的项目目录中，如果没有package.json，先来初始化一下：

npm init -y

安装Gulp

然后我们来安装gulp和gulp对应压缩css的插件：

npm i gulp gulp-clean-css

我的css存放在目录下css文件夹内，目录结构如下图：

配置Gulp

我们在项目根目录下新建个文件gulpfile.js，然后编写内容：

const gulp=require("gulp")
const cleanCss=require("gulp-clean-css")

function clean(){
    return gulp.src("css/*.css") // css文件位置
    .pipe(cleanCss()) // 执行压缩操作
    .pipe(gulp.dest("dist")) // 导出到dist文件夹内
}

exports.clean = clean // 这样可以通过写任务名来执行这个任务

运行代码

写好后，我们打开终端，执行这个任务：

npx gulp clean

我们会发现终端会出现以下输出：
gulp输出结果
这时，我们会发现我们项目目录下多了个dist文件夹，里面有个style.css，而这正是我们想要的压缩版。可以来看下压缩前后对比图。

效果对比图

压缩前：
css压缩前
压缩后：
css压缩后

后记

当然，也有通过gulp-rename插件把压缩后的文件改名为什么什么.min.css的，感兴趣的小伙伴下去可以自行尝试。本文就到这里了。

东子个人博客