gulp压缩css任务（四）

1.css压缩常用插件

插件：gulp-cssmin

        安装：

npm i gulp-cssmin -D

        在gulpfile.js中导入：

const cssmin = require('gulp-cssmin')

导入以后得到一个处理流文件的函数，直接在管道函数里执行就行

2.css自动添加前缀

        插件：gulp-autoprefixer

        下载：

npm i gulp-autoprefixer -D

        在gulpfile.js中导入：

const autoPrefixer = require('gulp-autoprefixer')

导入以后得到一个处理流文件的函数，直接在管道函数里使用，需要传递参数

参数是一个对象{browsers:[要兼容的浏览器]}

具体代码如下：

// 书写gulp配置文件
// 0. 导入第三方
// 0-1.导入gulp
const gulp = require('gulp')
// 0-2.导入gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-3.导入gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')

// 1.创建任务
// 1-1.创建爱你一个打包css的任务
const cssHandler = function () {
  return gulp
    .src('./src/css/*.css') //1.找到内容
    .pipe(autoPrefixer()) // 2.自动添加前缀
    .pipe(cssmin()) // 3.压缩
    .pipe(gulp.dest('./dist/css')) //4.放到指定目录
}

// 2.导出任务
// 2-1.导出打包的css的任务
module.exports.cssHandler = cssHandler

注意：在添加前缀的时候如果在autoPrefixer({browsers:['last 2 versions']})添加参数后，在cmd中执行gulp cssHandler会报错，具体错误如下：

为解决次错误，autoPrefixer中的参数写在package.json文件中即可解决：

// package.josn
{
  "name": "xiaomi",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-cssmin": "^0.2.0"
  },
  "browserslist": [
    "last 2 versions"
  ]
}