使用shell脚本完成前端重复性操作

文摘   2024-11-24 19:50   湖北  


#!/bin/bash

if ! command -v pnpm &> /dev/null
then
    echo "Error: pnpm 未安装,请先安装 pnpm。"
    exit 1
fi

# 初始化项目(如果尚未初始化)
if [ ! -f "package.json" ]; then
    echo "未检测到 package.json,正在初始化 pnpm 项目..."
    pnpm init -y
fi

echo "安装 Tailwind CSS 和依赖包..."
pnpm add -D tailwindcss postcss autoprefixer

echo "生成 Tailwind CSS 配置文件和 PostCSS 配置文件..."
npx tailwindcss init -p

echo "配置 Tailwind CSS 模板路径..."
cat > tailwind.config.js <<EOL
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
EOL

echo "创建 CSS 文件并添加 Tailwind 指令..."
mkdir -p src
cat > src/index.css <<EOL
@tailwind base;
@tailwind components;
@tailwind utilities;
EOL

echo "脚本执行完毕,请运行以下命令启动开发服务器:"
echo "pnpm run dev"

将脚本保存为 setup_tailwind_pnpm.sh

在终端中运行:bash setup_tailwind_pnpm.sh

按照提示运行 pnpm run dev,即可启动开发环境

以上只是一种示范,可以在这个基础上延伸出其它工具类的一键操作方便后面的快速流程


字节笔记本
专注于科技领域的分享,AIGC,全栈开发,产品运营
 最新文章