一个脚本搞定css、html、js混肴问题

混肴的作用

防止浏览器的js/html/css代码被他人盗用。

tomix.sh混肴脚本

#!/bin/bash  
# 原理： 1、上传落地页到服务器 2、服务器执行tomix.sh 3、备份index.js 为 copy-timestamp-p3.index.js 4、将index.js 混肴

# 文件结构 ： ./tomix.sh ./index.html ./css/index.css ./js/index.js  

# 命令行：    ./tomix.sh p1 p2 p3
# p1 参数为文件夹和文件夹里文件的后缀
# p2 文件夹里的文件名称 
# p3 混肴标识用于区分是否是新上传的[js/css/html]。用于记录最新版本[js/css/html]的混肴备份.虽然有时间搓区分。但是同一个目录可以多次执行脚本

# 使用方式：  ./tomix.sh html index isNew  | tomix.sh css index isNew | tomix.sh js index isNew


# 检查是否安装了 html-minifier 或 cleancss 或 javascript-obfuscator  
if ! command -v html-minifier &> /dev/null; then  
    echo "html-minifier 不可用，请安装 html-minifier 后再运行此脚本。执行安装： npm install -g html-minifier"  
    exit 1  
fi  
if [ "$type" == "css" ]; then  
  if ! command -v cleancss &> /dev/null; then  
    echo "cleancss 不可用，请安装 cleancss 后再运行此脚本。执行安装： npm install -g clean-css-cli"  
    exit 1  
  fi 
fi  
if [ "$type" == "js" ]; then  
  if ! command -v javascript-obfuscator &> /dev/null; then  
    echo "javascript-obfuscator 不可用，请安装后再运行此脚本。执行安装：npm install -g javascript-obfuscator"  
    exit 1  
  fi 
fi  
# 检查参数数量  
if [ "$#" -gt 3 ]; then  
  echo "Usage: $0 [type:css/html/js] [name] [remark]"  
  exit 1  
fi  
  
# 设置默认值  
type="html"  
name="index"  
remark="init"
  
# 检查第一个参数（文件类型）  
if [ -n "$1" ]; then  
  if [ "$1" == "css" ]; then  
    type="css"  
  elif [ "$1" == "html" ]; then  
    type="html"  
  elif [ "$1" == "js" ]; then  
    type="js"
  else 
    echo "Invalid type. Use 'css' or 'html' or 'js'."  
    exit 1  
  fi  
fi  
  
# 检查第二个参数（文件名称）  
if [ -n "$2" ]; then  
  name="$2"  
fi  
if [ -n "$3" ]; then  
  remark="$3"  
fi  
# ./css/xxx.css => ./css/xxx.min.css or ./js/xxx.js => ./js/xxx.min.js
src="./$type/$name.$type"  
dist="./$type/$name.$type" 
bak="./$type/copy-$timestamp-$remark.$name.$type" 

# 获取当前时间并格式化为 YYYYMMDDhhmmss
timestamp=$(date +"%Y%m%d%H%M%S")

if [ "$type" == "html" ]; then
  # 为 html 就是当前目录下执行 如果是css或者js，则目标目录下执行
  # xxx.html => mixed => copy => index.copy.html
  src="$name.$type"  
  dist="$name.$type" 
  bak="copy-$timestamp-$remark.$name.$type" 
fi

# 检查文件是否存在  
if [ ! -f "$src" ]; then  
  echo "Source file $src does not exist."  
  exit 1  
fi  

cp "$src" "$bak"
echo "copy $src to $bak"
# 执行压缩或混淆  
if [ "$type" == "css" ]; then  
  # 压缩CSS文件
  cleancss -o "$dist" "$src" 
elif [ "$type" == "html" ]; then  
  # 压缩混肴HTML文件
  html-minifier "$src" -o "$dist" --collapse-whitespace --remove-comments --minify-css --minify-js   
elif [ "$type" == "js" ]; then
  # 混淆JS文件
  #javascript-obfuscator "$src" --output "$dist" --config "./obfuscator.config.json" #!/bin/bash  
# 原理： 1、上传落地页到服务器 2、服务器执行tomix.sh 3、备份index.js 为 copy-timestamp-p3.index.js 4、将index.js 混肴

# 文件结构 ： ./tomix.sh ./index.html ./css/index.css ./js/index.js  

# 命令行：    ./tomix.sh p1 p2 p3
# p1 参数为文件夹和文件夹里文件的后缀
# p2 文件夹里的文件名称 
# p3 混肴标识用于区分是否是新上传的[js/css/html]。用于记录最新版本[js/css/html]的混肴备份.虽然有时间搓区分。但是同一个目录可以多次执行脚本

# 使用方式：  ./tomix.sh html index isNew  | tomix.sh css index isNew | tomix.sh js index isNew


# 检查是否安装了 html-minifier 或 cleancss 或 javascript-obfuscator  
if ! command -v html-minifier &> /dev/null; then  
    echo "html-minifier 不可用，请安装 html-minifier 后再运行此脚本。执行安装： npm install -g html-minifier"  
    exit 1  
fi  
if [ "$type" == "css" ]; then  
  if ! command -v cleancss &> /dev/null; then  
    echo "cleancss 不可用，请安装 cleancss 后再运行此脚本。执行安装： npm install -g clean-css-cli"  
    exit 1  
  fi 
fi  
if [ "$type" == "js" ]; then  
  if ! command -v javascript-obfuscator &> /dev/null; then  
    echo "javascript-obfuscator 不可用，请安装后再运行此脚本。执行安装：npm install -g javascript-obfuscator"  
    exit 1  
  fi 
fi  
# 检查参数数量  
if [ "$#" -gt 3 ]; then  
  echo "Usage: $0 [type:css/html/js] [name] [remark]"  
  exit 1  
fi  
  
# 设置默认值  
type="html"  
name="index"  
remark="init"
  
# 检查第一个参数（文件类型）  
if [ -n "$1" ]; then  
  if [ "$1" == "css" ]; then  
    type="css"  
  elif [ "$1" == "html" ]; then  
    type="html"  
  elif [ "$1" == "js" ]; then  
    type="js"
  else 
    echo "Invalid type. Use 'css' or 'html' or 'js'."  
    exit 1  
  fi  
fi  
  
# 检查第二个参数（文件名称）  
if [ -n "$2" ]; then  
  name="$2"  
fi  
if [ -n "$3" ]; then  
  remark="$3"  
fi  

src="./$type/$name.$type"  
dist="./$type/$name.$type" 
bak="./$type/copy-$timestamp-$remark.$name.$type" 

# 获取当前时间
timestamp=$(date +"%Y%m%d%H%M%S")

# 为 html 就是当前目录下执行 如果是css或者js，则目标目录下执行
# xxx.html => mixed => copy => index.copy.html
if [ "$type" == "html" ]; then
  src="$name.$type"  
  dist="$name.$type" 
  bak="copy-$timestamp-$remark.$name.$type" 
fi

# 检查文件是否存在  
if [ ! -f "$src" ]; then  
  echo "Source file $src does not exist."  
  exit 1  
fi  


# 备份文件  
cp "$src" "$bak"
echo "copy $src to $bak"


# 执行压缩或混淆  
if [ "$type" == "css" ]; then  
  # ********* 压缩CSS文件为一行（生成*.min.js） *********
  cleancss -o "$dist" "$src" 
elif [ "$type" == "html" ]; then  
  #html-minifier "$src" -o "$dist" --collapse-whitespace --remove-comments --minify-css --minify-js   
  # 压缩混肴HTML文件
  # ********* 混肴JavaScript代码并压缩HTML *********
  temp_js="script.js"
  temp_js1="script1.js"
  # 1、从 HTML 文件中提取 JavaScript 代码
  grep -oP '<script>\K.*?(?=</script>)' "$src" > "$temp_js"
  grep -oP '<script type="text/javascript">\K.*?(?=</script>)' "$src" > "$temp_js1"
  # 2、使用 javascript-obfuscator 混淆 JavaScript 代码
  javascript-obfuscator "$temp_js" --output "$temp_js" --compact true --control-flow-flattening false --numbers-to-expressions false --split-strings false --string-array false --simplify true --dead-code-injection false --debug-protection false --self-defending false --transform-object-keys true --rename-globals false --seed 0
  # 3、将混淆后的 JavaScript 代码插入 HTML 文件中
  sed -i "s/<script>.*<\/script>/<script>$(cat $temp_js)<\/script>/" "$src"
  sed -i "s/<script type=\"text\/javascript\">.*<\/script>/<script type=\"text\/javascript\">$(cat $temp_js1)<\/script>/" "$src"
  # 4、压缩混肴HTML文件
  html-minifier "$src" -o "$dist" --collapse-whitespace --remove-comments --minify-css --minify-js
  # 5、删除混淆后的 JavaScript 代码
  rm "$temp_js"
  rm "$temp_js1"
elif [ "$type" == "js" ]; then
  # ********* 混淆JS文件 *********
  #javascript-obfuscator "$src" --output "$dist" --config "./obfuscator.config.json" 
  javascript-obfuscator "$src" --output "$dist" --compact true  --control-flow-flattening false --numbers-to-expressions false --split-strings false --string-array false --simplify true --dead-code-injection false --debug-protection false --self-defending false --transform-object-keys true --rename-globals false --seed 0
else
  echo "Invalid type. Use 'css' or 'html' or 'js'."
  exit 1  
fi  
echo "mix $src to $dist"
  javascript-obfuscator "$src" --output "$dist" --compact true  --control-flow-flattening false --numbers-to-expressions false --split-strings false --string-array false --simplify true --dead-code-injection false --debug-protection false --self-defending false --transform-object-keys true --rename-globals false --seed 0
else
  echo "Invalid type. Use 'css' or 'html' or 'js'."
  exit 1  
fi  
echo "mix $src to $dist"