背景

我们目前的配置用shadow-cljs release app 打包好js文件后，需要将入口文件、图片、css、js一起copy到部署服务器。
其中css是散碎的各个页面自行添加的样式文件。
但是用electron直接访问URL以后，css总是被缓存下来，这样就导致了一个系统修改的样式后在应用里打开不生效的问题。

方案

将在部署时将众多css文件内容合并到一个css文件，然后在入口的index.html里引入这个被合并的css文件，同时加上版本号，禁止缓存。

实施

第一步，准备脚本

因为使用jenkins发布，所以先搞一个合并文件的脚本(merge_css.sh)，等着在jenkins里远端执行一下。内容如下：

#!/bin/bash
#获取第一个参数,目标目录
srcpath=$1
#第二个参数，输出文件
target_file=$2

#先删除原目标文件
rm -rf ${target_file};

function writeByDir(){
    echo $1
    for file in $1/*
      do
        if test -f $file
          then
      echo $file
          cat "$file" >> "${target_file}"
          echo "" >> "${target_file}"
        else
          writeByDir $file
       fi
    done
}

writeByDir ${srcpath}

很简单，连参数合理性都没有校验，自己用自己知道就行。

第二步，远端执行

在jenkins里，跟原来一样，将css、img、index.html、app.js核心文件rsync -rzve 到远端以后，再构建最后加一个合并的shell

ssh -p2020 root@*.*.*.* 'bash -s ' < /opt/auto-deploy-scripts/merge_css.sh /opt/site/project/css /opt/site/project/css/main.css

在原来的css文件下，将生成一个main.css文件。

第三步，使用合并的css文件

<html lang="cn">
<head>
    <title>平台</title>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link href="https://cdn.bootcss.com/antd/3.18.0/antd.min.css" rel="stylesheet">
</head>

<body>

<!-- Our JavaScript will modify the DOM inside this element -->
<div id="app"></div>

<script type="text/javascript">
    document.write("<link rel='stylesheet' type='text/css' href='css/main.css?v="+new Date().getTime()+"'>");
</script>

<script type="text/javascript">
    document.write("<script type='text/javascript' src='doctorjs/app.js?v="+new Date().getTime()+"' type='text/javascript'><\/script>");
</script>

</Body>
</html>

经检查，已生效。
完！！！