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"
]
}