Gulp学习--css压缩处理(顺便解决zindex问题)之clean-css(部分参数解析)

gulpfile.js中代码

const { src,dest,task } = require('gulp');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const cleanCss = require('gulp-clean-css');

task('css', async function(){
	await src('./src/**/*.css')		
		.pipe(concat('all.css'))
		.pipe(sourcemaps.init())
		.pipe(cleanCss({
			format:'keep-breaks', //format有两个可选项 
					//beautify增强压缩文件的可读性，但压缩程度会减小
					//keep-breaks,可读性适合，提供换行，压缩程度大

			format:{
				breaks: { 
			      afterAtRule: false, 		//压缩后是否有换行符
			      afterBlockBegins: false, 	//块开始之后是否出现换行符
			      afterBlockEnds: false, 	// 块结束后是否出现换行符
			      afterComment: false, 		// 注释后是否出现换行符
			      afterProperty: false, 	//是否在属性后插入换行符
			      afterRuleBegins: false, 	// 压缩开始后是否出现换行符
			      afterRuleEnds: false, 	// 压缩结束后是否出现换行符
			      beforeBlockEnds: false, 	//块结束之前是否出现换行符
			      betweenSelectors: false 	//选择符之间是否有换行符
			    },

			    breakWith: '\n', 			// 控制换行符(\n)也可以控制制表符(\t)
			    indentBy: 0, 				// 要缩进的字符数
			    indentWith: 'space', 		// 控制要缩进的字符

			    spaces: { 					// 
			      aroundSelectorRelation: false, 	//选择器周围是否有空格 
			      beforeBlockBegins: false, // 在块开始之前是否有空格
			      beforeValue: false 		// 在数值开始之前是否有空格
			    },

			    wrapAt: false 				// 
			},

			compatibility:'*', //浏览器兼容性
					//*（默认）-Internet Explorer 10+兼容模式
					//ie9	-Internet Explorer 9+兼容模式
					//ie8	-Internet Explorer 8+兼容模式
					//ie7	-Internet Explorer 7+兼容模式
					//ie6	-Internet Explorer 6+兼容模式

			compatibility:{
				color:{
					opacity: true //允许压缩rgba属性
				},

				properties:{
					backgroundClipMerging:true,		//  控制背景剪辑合并为简写  
			      	backgroundOriginMerging:true,	//  控制背景起源合并为简写  
			      	backgroundSizeMerging:true,		//  控制背景大小合并为简写  
			      	colors:true,					//  控制颜色优化  
			      	ieBangHack:false,				//  控制IE非法入侵  
			      	ieFilters:false,				//  控制保持IE`filter` /`-ms-filter`  
			      	iePrefixHack:false,				//  控制保持IE前缀hack  
			      	ieSuffixHack:false,				//  控制保持IE后缀hack  
			      	merging:true,					//  根据可理解性控制属性合并  
			      	shortLengthUnits:false,			//  控制将像素单位缩短为`pc`，`pt`或`in`单位  
			      	spaceAfterClosingBrace:true,	//  控制在关闭花括号后保持空间-url（）no-repeat变为url（）no-repeat  
			      	urlQuotes:false,				//  控制是否在`url（）`内引用  
			      	zeroUnits:true 					//  控制删除单位“ 0”值  
				},

				selectors:{
			      adjacentSpace:	true, //控制nav元素之前额外的空间
			      ie7Hack: true, 	//控制IE7选择器的删除
			      mergeablePseudoClasses: [':active','hover'], // 控制可合并的伪类 
			      mergeablePseudoElements: ['::after'], //控制可合并的伪元素
			      mergeLimit: 8191, //制单个规则中的最大选择器数量
			      multiplePseudoMerging: true //控制具有多个伪类/元素的规则的合并
    			},

				untils:{
					ch: true ,		//  控制将`ch`视为受支持的单位  
			      	in: true ,		//  控制将“ in”视为受支持的单位  
			      	pc: true ,		//  控制将`pc`视为受支持的单位  
			      	pt: true ,		//  控制将pt作为支持的单元  
			      	rem: true ,		//  控制将`rem`视为受支持的单位  
			      	vh: true ,		//  控制将`vh`视为受支持的单位  
			      	vm : true ,		//  控制将vm作为支持的单元  
			      	vmax: true ,	//  控制将`vmax`视为受支持的单位  
			      	vmin: true 		//  控制将`vmin`视为受支持的单位 
				}
			},

			inline: ['local'], 	//默认值; 仅启用本地内联 
								//['none'] 禁用所有内联 
								//['all'] 启用所有内联,与['local','remote']相同 
								//[' mydomain.example.com'] 启用给定的远程源 
			debug: true
		}, 
		(details) => {
      		console.log(`${details.name}: ${details.stats.originalSize}`);
      		console.log(`${details.name}: ${details.stats.minifiedSize}`);
    	}))
		.pipe(rename({			
			'suffix': '.min'
		}))						
		.pipe(sourcemaps.write('.'))
		.pipe(dest('./dist/css/'));	
});