关于gulp:Gulp-使用gulp压缩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

如下图所示：

在 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 文件。