在Mac上进行前端开发时，频繁创建HTML5项目往往需要重复执行新建文件夹、编写HTML基础结构、创建CSS和JS目录等操作，耗时且容易出错。借助Alfred的工作流功能，我们可以把这些重复步骤自动化，只需输入指定关键词就能快速生成完整的HTML5项目结构。
准备工作
首先确保你已经安装Alfred并购买了Powerpack，因为工作流功能属于Powerpack的付费特性。同时需要在Mac上安装好你常用的代码编辑器，本文示例中使用VS Code，你也可以使用其他编辑器。
创建Alfred工作流
新建工作流
打开Alfred偏好设置，切换到Workflows标签页，点击左下角的加号，选择Blank Workflow，填写工作流的基本信息：
- Name：Create HTML5 Project
- Description：快速创建标准HTML5项目结构
- Category：Development
点击Create完成工作流创建。
添加触发关键词
右键工作流空白处，选择Inputs -> Keyword，配置触发关键词：
- Keyword：html5
- Argument：Required
- Argument placeholder：输入项目名称
这个关键词会让Alfred在输入html5后等待你输入项目名称作为参数。
添加脚本动作
右键工作流空白处，选择Actions -> Run Script，配置脚本类型为/bin/bash，在脚本框中写入以下代码：
#!/bin/bash
# 获取输入的项目名称
project_name="$1"
# 定义项目存放的基础路径，你可以根据自己的需求修改
base_path="$HOME/Documents/HTML5_Projects"
# 创建项目根目录
project_path="$base_path/$project_name"
mkdir -p "$project_path"
# 创建CSS和JS目录
mkdir -p "$project_path/css"
mkdir -p "$project_path/js"
# 创建HTML5基础结构文件
cat > "$project_path/index.html" << EOF
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$project_name</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>$project_name</h1>
<script src="js/main.js"></script>
</body>
</html>
EOF
# 创建空CSS文件
touch "$project_path/css/style.css"
# 创建空JS文件
touch "$project_path/js/main.js"
# 用VS Code打开项目，如果你用其他编辑器可以替换对应的命令
open -a "Visual Studio Code" "$project_path"
脚本中的base_path可以修改为你希望存放HTML5项目的目录，如果你使用的不是VS Code，可以把最后一行的open -a "Visual Studio Code"替换成对应编辑器的打开命令。
连接触发器和脚本
点击Keyword模块右侧的输出点，拖动到Run Script模块左侧的输入点，完成两个模块的连接。
测试工作流
按下Alfred的唤起快捷键，输入html5 测试项目，回车后等待几秒，你会看到Documents目录下自动生成了名为测试项目的文件夹，里面包含标准的HTML5结构文件和对应的CSS、JS目录，同时VS Code会自动打开这个项目。
扩展优化
如果需要更丰富的功能，还可以对工作流进行扩展：
- 添加更多参数，支持选择是否生成额外的页面文件
- 在脚本中加入git初始化命令，自动初始化git仓库
- 配置通知动作，在项目创建完成后弹出系统通知提示
- 支持自定义项目存放路径，通过额外的参数传入路径
通过这些优化，可以让Alfred工作流更贴合你个人的开发习惯，进一步提升项目创建的效率。