首页 > 特效插件 > 其他特效 >  gulp压缩CSS插件:gulp-clean-css正文

gulp压缩CSS插件:gulp-clean-css

特效介绍

我们除了可以使用 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


如下图所示:


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 文件:


gulp-clean-css


此时项目根目录下的 dist 目录中会生成一个 CSS 文件夹,被压缩的 CSS 文件就放在这个文件夹中。

gulp-cssnano 插件的使用与上述步骤类似,这里就不一一演示啦,大家可以自己安装 gulp-cssnano 插件,还要将 gulp-clean-css 替换成 gulp-cssnano 插件,运行命令,同样可以成功压缩 CSS 文件。