为什么要制作这款插件
微信小程序从2016年年尾内测到现在已经有了2年多时间，相信有有一些小程序已经迭代了 非常久的时间。
像这种小程序中可能存在一些历史比较久的页面或者复杂的页面,像这种页面应该留下了一些没有用到的样式，如果当时编写时没有留下注释那就更麻烦了，如果我们通过人力去查找删除的话费时费力，如果想用工具解决因为小程序的特殊的架构又没有好的工具，就这样，使得那些没有用到的样式一直留在代码中，占据着小程序的体积。
gulp-cleanwxss就是一款专门针对微信小程序制作的清除无用样式的gulp插件。
原理
gulp-cleanwxss是如何静态分析出没用用到的样式的呢。
微信小程序每个页面的wxss和wxml都是存在与同个文件夹，通过gulp找到wxss文件则可以找到wxml文件。 于是首先把wxml转化成一个树结构，并得到wxss中所有样式选择器，根据每个选择器的规则在wxml转化成的树结构中寻找是否有匹配元素，如果没有匹配元素则为没有使用的选择器。
优势
与其他清除样式工具或者插件优势在哪里呢。
gulp-cleanwxss是专门针对微信小程序制作的清除样式插件。
- 插件可以识别微信小程序模版渲染的class，如果为变量渲染出来的class则可以通过cssVariable参数配置
- 微信小程序的模版样式是可以通过页面修改的 ，插件会识别 template、import 标签找出模版内容，并检查页面的选择器有没有影响到模版元素
- 微信小程序有一些默认组件带有样式属性如hover-class、placeholder-class插件检查时会自动检查这些属性，如果是自定义组件则需要配置 componentsClass配置。
- 插件中log配置可以看到任务中删除掉了哪些无用样式，并提供了页面的所有模版与动态class变量提供给使用者查看
如何使用
如果之前没有使用过gulp的小伙伴需要先使用npm全局安装下gulp
npm install gulp -g
然后在微信小程序根目录
初始化npm
npm init
通过npm安装 gulp 和 gulp-cleanwxss模块
npm install --save-dev gulp gulp-cleanwxss
然后添加你的 gulpfile.js 文件
// gulpfile.js
const gulp = require( "gulp" );
const cleanwxss = require( "gulp-cleanwxss" );
gulp.task( "default", (done) => {
gulp.src( "./pages/**/**.wxss" )
.pipe( cleanwxss( {
log:true,
}))
.pipe( gulp.dest( "./dest" ) );
// cleanwxss为异步处理 需要触发done来通知gulp任务已经结束
done();
} );
最后在终端中敲入gulp执行任务
gulp
注意
请在gulp版本4.0.0以上使用
GITHUB
gulp-cleanwxss GitHub地址
