phpcss紧缩技巧_Gulp 运用gulp压缩CSS

压缩 CSS 文件同样须要用到相应的插件，关于 gulp 的 CSS 压缩插件，一共有如下三个：

上面三个插件，由于 gulp-minify-css 现在已经被标记为 deprecated，由于我们可以利用别的两个插件。

例如我们所有的 .css 文件压缩到 dist 目录下的 css 文件夹中，详细操作如下所示。

首先安装 gulp-clean-css 插件，命令如下所示：

npm install gulp-clean-css

如下图所示：

在gulpfile.js文件中编写代码

插件安装成功后，我们就可以在 gulpfile.js 文件中编写代码。

// 获取 gulpvar 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 文件。