评论

干货,小程序清除冗余css样式,清除多余css样式PHP版

小程序清除冗余css样式,清除多余css样式PHP版。


写在前面的一些废话

最近微信小程序项目快要上线了,在开发工具的Audits里看了下,说是建议清除多余css样式,搜了下看没有相关的工具,无奈只能自己动手丰衣足食了。

项目快一个月了,上个月写css的妹子离职了,挺想她的,她喜欢粉色,并且我和她经常一起喝奶茶,真的很想她!不多说了先上代码。

PS:此处省略一千万字......


/*
* 小程序清除冗余css样式
* by 尧曳网络 2020-06-29
* 步骤:
* 1、创建一个php文件,复制以下代码进去保存,更改变量$wxmlFolder为你的小程序pages目录路径,$publicCssPath为公共css路径
* 2、确认wxml文件中的class、id属性=号两边是否有多余空格或是否单或双引号,视情况更改$pattern正则匹配变量值(可在工具搜索看看有哪些class或id不同的形式)
* 3、建议在替换前确认所有已获得的css和id名称是否正确
* 4、提取结果只匹配“#”、“.”和":"伪类的样式,公共和引入的样式需要手动提取,最后将提取出的css保存为另外一个文件进行测试即可
*/

$wxmlFolder = '******/pages/';
$publicCssPath = '******/app.wxss';

//提取样式
function extractCss($content, $pattern)
{
    $css="";
    preg_match_all($pattern, $content, $matches);
    foreach ($matches[1] as $item) {
        preg_match_all("/'(.+?)'/is", $item, $Vmatches);
        foreach ($Vmatches[1] as $Vitem) {
            $css.=$Vitem." ";
        }
        preg_match_all("/\"(.+?)\"/is", $item, $Vmatches);
        foreach ($Vmatches[1] as $Vitem) {
            $css.=$Vitem." ";
        }
        $item = preg_replace('/{{(.+?)}}/is', '', $item);
        $css.=$item." ";
    }
    
    return $css;
}

/*获得所有样式文件*/
function getAllWxmlFile($folder)
{
    $files = scandir($folder);
    foreach ($files as $file) {
        if ($file != '.' && $file != '..') {
            if (is_dir($folder . '/' . $file)) {
                getAllWxmlFile($folder . '/' . $file);
            } else {
                $GLOBALS["wxmlList"][] = $folder . '/' .$file;
            }
        }
    }
}

/*获得所有样式*/
function getAllCss($folder)
{
    global $wxmlList;
    global $wxml;
    global $css;
    
    getAllWxmlFile($folder);
    
    foreach ($wxmlList as $file) {
        if (strpos($file, '.wxml') !== false) {
            $wxml[]=$file;
        }
    }

    //取消注释查看文件列表
    //echo json_encode($wxml);
    //die();

    foreach ($wxml as $path) {
        $fs = fopen($path, "r");
        $content = fread($fs, filesize($path));
        fclose($fs);
        //class="" 双引号
        $css[] = extractCss($content, '/class="(.+?)"/is');
        //class='' 单引号
        $css[] = extractCss($content, '/class=\'(.+?)\'/is');
        //id="" 双引号
        $css[] = extractCss($content, '/id="(.+?)"/is');
        //id='' 单引号
        $css[] = extractCss($content, '/id=\'(.+?)\'/is');
    }
    
    $cssRes="";
    foreach ($css as $item) {
        $cssRes.=$item." ";
    }
    
    $allCss=array();
    $cssRes=explode(" ", $cssRes);
    foreach ($cssRes as $v) {
        $v = preg_replace('/\'/is', '', $v);
        $v = preg_replace('/{{(.+?)\?/is', '', $v);
        $v = preg_replace('/}}/is', '', $v);
        $v = preg_replace('/:/is', '', $v);
        if (!empty($v)) {
            if (!in_array($v, $allCss)) {
                $allCss[]=$v;
            }
        }
    }
    
    //取消注释查看css列表
    //echo json_encode($allCss);
    //die();

    return $allCss;
}


/*获得所有样式*/
function showAllCss($res)
{
    $fs = fopen($GLOBALS["publicCssPath"], "r");
    $publicCss = fread($fs, filesize($GLOBALS["publicCssPath"]));
    fclose($fs);

    //替换注释
    $publicCss = preg_replace('/\/\*(.+?)\*\//is', '', $publicCss);
    
    //查找css并提取出来
    $allCss = array();
    foreach ($res as $item) {
        //":"
        $patternCss="/(\. *".$item.":(.+?) *{(.+?)})/is";
        preg_match_all($patternCss, $publicCss, $matches);
        $_id=implode($matches[1]);
        if (!empty($_id)) {
            $allCss[]=$_id;
        }
        //"."
        $patternCss="/(\. *".$item." *{(.+?)})/is";
        preg_match_all($patternCss, $publicCss, $matches);
        $_css=implode($matches[1]);
        if (!empty($_css)) {
            $allCss[]=$_css;
        }
        //"#"
        $patternCss="/(\# *".$item." *{(.+?)})/is";
        preg_match_all($patternCss, $publicCss, $matches);
        $_id=implode($matches[1]);
        if (!empty($_id)) {
            $allCss[]=$_id;
        }
    }

    $allCssContentRes=array();
    foreach ($allCss as $v) {
        $allCssContentRes[]=$v;
    }
    
    foreach ($allCssContentRes as $k=>$v) {
        $allCssContentRes[$k] = preg_replace('/\r\n/is', '', $v);
        $allCssContentRes[$k] = preg_replace('/\t/is', '', $allCssContentRes[$k]);
    }

    return $allCssContentRes;
}


$res = getAllCss($wxmlFolder);
$allCss = showAllCss($res);
echo implode($allCss);


至此,运行后看上去似乎已经输出了一些样式,将结果另存为文件,然后把原来公共样式文件里的一些公共样式需要手动加入一下就可以了。

说实话,1999年编程至今孤身一人,当年看着马云、同程、携程、京东等崛起,甚至错过了炒玉米、小游戏等,落魄潦倒不堪至今,也就只能写点代码慰藉心灵了。

真想她,她写的css是那么的优雅,我认为她就是编程界的一股清流,可现在她从北京去了杭州,不知道还能不能和她联系上,也许……。

未完待续-----

最后一次编辑于  06-30  
点赞 1
收藏
评论

4 个评论

  • 宣华 
    宣华 
    06-29

    你作为初代Coder,你的确错过了很多,对比之后,你不仅失败,而且显得落魄。😂

    06-29
    赞同 1
    回复 1
  • Admin²⁰²⁰
    Admin²⁰²⁰
    06-29

    牛啊。这个很实用,一直想弄个的,奈何没动力。感觉能拖就拖着吧。

    你1999啊,大兄弟啊我混生活是算2000年开始写代码的,1998年写了个dos下的指法练习TT,那算是我真正写程序的年份吧。

    当年看着马云、同程、携程、京东等崛起,甚至错过了炒玉米、小游戏等,落魄潦倒不堪至今,也就只能写点代码慰藉心灵了。
    


    这个太有感触了,但是玉米我还是炒了一些的,但是错过了太多了。因为太沉醉于其他的事了哎~

    06-29
    赞同 1
    回复 5
  • ______
    ______
    07-08

    老哥,我专门登录来问下你多大了,看到你说99年就开始写代码了,我猜测你至少30了吧。写css的妹子年龄应该和你相差蛮多啊😂

    07-08
    赞同
    回复 4
    • Administrator
      Administrator
      07-09
      兄弟,我43了,妹子37,是我女朋友,年龄歧视很严重,不要有年龄歧视,歧视是一种智力上的缺陷,也是一种性格上的缺陷
      07-09
      回复
    • 上炁
      上炁
      07-14回复Administrator
      好像又相信爱情了
      07-14
      回复
    • Administrator
      Administrator
      07-15回复上炁
      爱是什么,我不知道,我不懂永远,我不懂自己
      07-15
      回复
    • 上炁
      上炁
      07-15
      emm···了解自己,懂自己,爱自己。然后了解别人,懂别人,把对自己的爱分享给别人···我理解的就是这个··理解尊重支持+学习=一起成长
      07-15
      回复
  • 宣华 
    宣华 
    06-29

    大师,你能不能写个JS版的呀,

    我不用php呀,我平时都是用云开发 或者Java的,

    建议再写一个清除JS 和WXML 的。

    给你一个参考网站。

    要是能作为微信开发者工具插件就很不错了,

    也算是为 Young Coder 做贡献吧🤣

    06-29
    赞同
    回复 5
登录 后发表内容