企业官网建设流程全解析

• 教程
• 文档
• 示例工程

本文基于 Coding Train 网站存档（website-archive）中 2018 Workflow 系列第 5 讲：Node 展开，讲解作者如何将 Node.js 与全局安装的 npm 包（p5-manager、http-server、live-server）纳入日常创作流程，用于批量生成 p5.js 草图脚手架和快速启动本地 Web 服务器。读完本文，你将掌握一套可直接复用的 p5.js 本地开发工作流，并理解该工作流在 Coding Train 仓库中的真实落地形态（从静态服务器到 Express/Socket.IO 服务端、再到批量脚本工具）。

一、文档背景：2018 Workflow 系列中的 Node 一课

_more/workflow/5-node.md是存档仓库中《2018 Workflow》系列（系列首页）的第 5 讲，发布时间为 2018-09-24。整个系列依次讲解：

1. 工作流简介（2018-09-14）
2. Visual Studio Code（2018-09-18）
3. Shell（zsh）（2018-09-19）
4. Git（2018-09-20）
5. Node（本文主题，2018-09-24）
6. Python 与 virtualenv（2018-09-27）

该讲原文档的核心表述只有一句，但信息量集中且明确：

In this video, I discuss how I use node.js and global packages (to generate p5 sketches, run a web server) as part of my workflow.

即：用 Node.js 和全局安装的 npm 包来完成两件事——生成 p5.js 草图、运行 Web 服务器。视频配套给出的工具清单为：

• Node.js：JavaScript 运行时，npm 包生态的基石；
• p5-manager：用于生成 p5.js 项目脚手架的全局命令行工具；
• http-server：零配置的静态文件服务器；
• live-server：带浏览器自动刷新能力的开发服务器；
• 另有 iTerm、Oh My ZSH! 作为终端环境配套。

仓库中还保留着更早版本的同类主题文档 _learning/programming-with-text/1.2-my-workflow.md，其中同样列出 node.js、NPM、http-server、Atom 编辑器及其 live-server 插件，可见“Node + 全局包驱动 p5 开发”是该社区长期沿用的工作流范式。

二、为什么 p5.js 工作流需要 Node.js

p5.js 草图本质上是一个静态网页：一个index.html引入 p5.js 库与用户的sketch.js，浏览器加载后即可运行。以仓库中最早的 CC_001_StarField/P5/index.html 为例，结构非常典型：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js"></script> <script type="text/javascript" src="sketch.js"></script> <script type="text/javascript" src="Star.js"></script>

sketch.js（见 CC_001_StarField/P5/sketch.js）中定义了标准的setup()/draw()生命周期。这类页面直接双击打开也能跑，但一旦涉及外部资源加载（图片、JSON、音频）、跨域请求、模块化组织，就需要一个本地 HTTP 服务器来提供正确的 MIME 类型与同源环境。Node.js 恰好提供了两种互补的能力：

• 作为运行时：运行 npm 全局包提供的 CLI 工具（脚手架生成、静态服务器）；
• 作为服务端：编写server.js实现真正的后端逻辑（静态托管、WebSocket 等）。

三、安装 Node.js 与全局 npm 包

第一步是从 Node.js 官方网站安装 Node 运行时（安装包自带 npm）。安装完成后，用npm install -g将工作流所需工具安装为全局包，使其可在任意目录下以命令行方式直接调用：

npm install -g p5-manager http-server live-server

• -g（global）表示全局安装：命令被放入系统可执行路径，不依赖某个具体项目的node_modules；
• 全局包适合“任何项目都要用”的开发工具，而项目级依赖（如 express、socket.io）则安装进各自项目的package.json，两者定位不同。

四、p5-manager：一键生成 p5.js 草图脚手架

p5-manager 解决的是“新建一个 p5 草图”的重复劳动：手动创建目录、index.html、sketch.js模板、引入 CDN 脚本，这套流程完全可以自动化。其核心用法：

p5 generate # 在当前目录生成一个标准的 p5.js 草图项目 p5 serve # 启动本地服务器预览草图（自带 live reload）

p5 generate会产出与仓库中 CodingChallenges 各挑战目录P5/子目录相同形态的结构——一个包含index.html与sketch.js的最小可运行骨架；p5 serve则把当前目录作为静态站点启动，供浏览器即时预览。对于 Coding Train 这种以“一集一个挑战、每个挑战多个实现变体”为产出单元的创作模式（CodingChallenges 下 CC_001 到 CC_169 及 P5 / Processing 双实现并存即为佐证），脚手架工具能显著降低“起新项目”的成本。

五、http-server 与 live-server：本地 Web 服务器

生成草图后，需要在浏览器中预览。两个全局包都提供“一条命令起服务”的能力：

# 零配置静态服务器（默认端口 8080，可用 -p 指定其他端口） http-server # 带自动刷新的开发服务器：文件保存后浏览器立即重载 live-server

• http-server：适合快速验证、临时分享、配合构建产物预览。它是“零配置”的，在项目根目录执行即把当前目录暴露为站点根路径；
• live-server：适合持续开发迭代。它在静态服务基础上加了文件监听与 WebSocket 通知，sketch.js或index.html一旦保存，页面无需手动刷新即可看到最新效果，这正是 p5 视觉调试中最省心的体验。

在浏览器地址栏通过http://localhost:8080（或 live-server 提示的端口）访问后，浏览器便会按 CC_001_StarField/P5/index.html 的脚本顺序加载 p5.js CDN 库与本地sketch.js，完成一次完整渲染。

六、仓库源码佐证：Node 在 Coding Train 项目中的真实形态

上述“Node 驱动 p5 开发”并非纸上谈兵，当前仓库中就有多个直接用 Node.js 搭建的工程，可作为深度参照。

6.1 Express + Socket.IO 服务端（Node/sockets）

Node/sockets/ 是一个完整的 Node 服务端示例，对应仓库 Node/sockets/package.json 声明的依赖：

"dependencies": { "express": "^4.13.4", "socket.io": "^2.4.0" }

Node/sockets/server.js 展示了 Node 服务端的两层能力：

// 监听 3000 端口（部署到 PaaS 时可用环境变量覆盖） var server = app.listen(process.env.PORT || 3000, listen); // 把 public 目录作为静态资源根目录 app.use(express.static('public'));

• process.env.PORT || 3000：支持通过环境变量指定端口（代码注释明确说明这是为 Heroku 等部署场景预留的）；
• express.static('public')：将 public/ 目录静态托管——这正是 http-server 所做工作的“工程化版本”；
• 随后通过require('socket.io')(server)挂载 WebSocket，在io.sockets.on('connection', ...)中实现实时消息广播（见 Node/sockets/server.js）。

这个示例证明：当静态服务器不足以满足需求（实时通信、多客户端同步）时，Node 可以作为完整后端支撑 p5 项目——仓库中 CodingChallenges/CC_032.2_agar.io_sockets/Node/package.json 即用同套 express + socket.io 方案实现多人版 agar.io 挑战。

6.2 根目录 package.json：npm scripts 驱动的工程化

仓库根目录的 package.json 是 Node 工具链在内容型站点上的典型用法：把全部工程化操作收敛为npm run命令：

"scripts": { "lint": "npm run lint-cc && npm run lint-cabana && ...", "lint-cc": "./node_modules/.bin/eslint ./CodingChallenges/", "test-html": "bundle exec htmlproofer ./_site ...", "yt-descriptions": "node ./_scripts/generate-youtube-descriptions.js" }

• lint-*：用 ESLint 对 CodingChallenges、beginners、Tutorials 等目录做代码规范检查；
• test-html：对 Jekyll 生成的_site做 HTML 链接完整性校验；
• yt-descriptions：调用 Node 脚本自动生成 YouTube 视频简介。

6.3 仓库内的 Node 脚本工具

• _scripts/generate-youtube-descriptions.js：用fs递归扫描_CodingChallenges下的 Markdown，解析 YAML front matter（yaml-front-matter包），自动拼装含链接、时间戳、前/后视频信息的 YouTube 描述文本；
• p5Update.js：用replace-in-file把全站所有index.html中的 p5.js CDN 引用从1.4.0批量升级到1.4.1，模式匹配https://cdn.jsdelivr.net/npm/p5@<版本>/lib/p5.min.js——这恰好演示了“p5 草图依赖 CDN 版本号”这一事实，也解释了为何 CC_001_StarField/P5/index.html 中写的是p5@1.4.1；
• checkVariations.js：通过octocat+dotenv读取 GitHub Issue，结合 YAML front matter 生成挑战实现矩阵表格并回写 Issue；
• unit_testing/readme.md：说明仓库用 jest（Node 系测试框架）对每个 PR 的*.test.js文件做单元测试，用于校验文件格式合法性。

这些脚本共同说明：Node.js 不只是“跑个静态服务器”的玩具，而是整个 Coding Train 内容生产与工程质量体系的基础设施——生成、校验、批量升级、自动化发布都由 Node 脚本承载。

七、与站点构建（Jekyll）的协同

需要说明的是，Coding Train 网站本体（本仓库）是 Jekyll 静态站点，仓库根目录的 docker-compose.yml 提供了站点本地预览方式：

jekyll: image: jekyll/jekyll command: jekyll serve --watch ports: - 4000:4000

这与你用http-server/live-server预览 p5 草图是两套互补场景：

• p5 草图：Node 全局包起本地静态服务（8080 等端口），面向“创作与调试”；
• 网站本体：Jekyll 构建服务（4000 端口，--watch监听变更），面向“文档与内容展示”。

两者共享同一理念——本地即时预览、改动即时生效，只是工具链不同。

八、工作流串联：从编辑器到终端到版本控制

将本讲放回整个 2018 Workflow 系列，一条完整链路是：

1. 用 Visual Studio Code 写代码；
2. 在 Shell（zsh + Oh My ZSH!） 中执行命令；
3. 用 Git 管理版本；
4. 用 Node 与全局 npm 包生成 p5 草图并起本地服务器（本讲）；
5. 需要 Python 环境时再用 virtualenv 隔离。

Node 一环的最终价值是：把“建项目、跑服务、看效果”压缩为几条全局命令，让创作者把精力留给算法与视觉本身。仓库中 CodingChallenges 上百个挑战的 P5 实现（如 CC_001_StarField/P5、CC_124_Flocking_Boids）就是这套工作流持续运转的产物——每个index.html + sketch.js结构都可以由p5 generate一键复现，再用live-server即时预览。

九、小结

本文以 2018 Workflow 第 5 讲 为骨架，完整梳理了 Node.js 与全局 npm 包在 p5.js 创作工作流中的定位：

无论你只是想在本地跑通一个 p5 挑战，还是打算为 p5 项目编写 Express/Socket.IO 后端，本文给出的命令与仓库源码都可作为直接起点。动手步骤很简单：安装 Node →npm install -g p5-manager http-server live-server→p5 generate建草图 →live-server预览，然后在浏览器里开始创造。

• 教程
• 文档
• 示例工程