用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 工具/框架 查看内容

gulp-cleanwxss 一款清除微信小程序中无用样式的gulp插件

Rolan 2019-7-11 00:01

微信小程序从2016年年尾内测到现在已经有了2年多时间,相信有有一些小程序已经迭代了 非常久的时间。像这种小程序中可能存在一些历史比较久的页面或者复杂的页面,像这种页面应该留下了一些没有用到的样式,如果当时 ...

微信小程序从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变量提供给使用者查看

如何使用

首先在微信小程序根目录

通过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", ( ) => {
    gulp.src( "./pages/**/**.wxss" )
        .pipe( cleanwxss( {
            log:true,
        }))
        .pipe( gulp.dest( "./dest" ) );
} );

复制代码

###GITHUB

gulp-cleanwxss GitHub地址

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 西瓜弟弟 来自: 掘金