首页 > 文章 > 前端

Alfred快速创建HTML5项目教程

时间：2025-12-09 10:30:46 414浏览收藏

推广推荐

支持 PC / 移动端，安全直达

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《用Alfred快速创建HTML5项目 workflow 教程》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

通过Alfred工作流可一键创建HTML5项目，首先配置“Create HTML5 Project”工作流并设置关键词newhtml，接着编写Shell脚本生成包含index.html、css、js和images的标准结构，指定项目保存至~/Projects目录，并添加通知反馈机制，最后输入newhtml 项目名即可自动生成完整项目。

Mac用Alfred工作流快速创建HTML5项目

如果您希望通过快捷方式在Mac上快速生成一个新的HTML5项目结构，可以利用Alfred工作流实现自动化创建。通过自定义触发关键词和脚本执行，您可以一键生成包含标准文件结构和基础代码的HTML5项目。

本文运行环境：MacBook Pro，macOS Sonoma

一、配置Alfred基础工作流

Alfred是一款强大的Mac效率工具，其Powerpack功能支持创建工作流来自动化任务。通过创建自定义工作流，可以绑定关键词触发项目生成动作。

1、打开Alfred Preferences，进入“Workflows”选项卡。

2、点击左下角“+”号，选择“Blank Workflow”，输入名称如“Create HTML5 Project”。

3、拖拽“Keyword”模块到工作区，设置关键词为newhtml，并勾选“Argument Required”以便输入项目名称。

4、连接“Keyword”模块到下一个操作模块，准备添加执行脚本。

二、编写Shell脚本生成项目结构

使用Shell脚本可以在指定目录下创建HTML5项目的标准文件夹结构和基础文件，包括index.html、css、js和images目录。

1、在工作流中添加“Run Script”模块，选择语言为/bin/zsh或/bin/bash。

2、粘贴以下脚本内容：

project_name="{query}"
target_dir="$HOME/Projects/$project_name"

mkdir -p "$target_dir/css"
mkdir -p "$target_dir/js"
mkdir -p "$target_dir/images"

cat > "$target_dir/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>Welcome to $project_name</h1>
    <script src="js/main.js"></script>
</body>
</html>
EOF

touch "$target_dir/css/style.css"
touch "$target_dir/js/main.js"

echo "Project $project_name created at $target_dir"

3、确保脚本路径正确，并将输出传递给后续模块（如有需要）。