我们除了可以使用 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
文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。