前端示例工程【免费下载链接】web-starter-kitWeb Starter Kit - a workflow for multi-device websites项目地址https://gitcode.com/gh_mirrors/webs/web-starter-kit点击查看免费下载本文是一份以 Web Starter KitWSK官方部署文档 docs/deploy-firebase.md 为主体的实战指南讲解如何将基于 WSK 构建的多设备站点部署到 Firebase Hosting并以「Pretty URLs」无.html后缀的整洁网址对外提供访问。读者按本文操作即可完成从注册 Firebase 账户、安装命令行工具、构建dist产物到正式上线的完整流程同时理解 WSK 的构建产物为何能直接作为 Firebase 静态托管目录。为什么选择 Firebase 部署 WSKFirebase 是部署 Web Starter Kit 站点非常简单且安全的方式注册免费账户后在 5 分钟内即可完成部署。对于 WSK 这类完全静态的站点页面、样式、脚本、图片以及构建时生成的 Service WorkerFirebase Hosting 提供了开箱即用的 HTTPS 支持与全球 CDN 分发无需维护服务器。这一点与 WSK 的定位高度契合——WSK 的构建产物本身就是一套纯静态文件。在 gulpfile.babel.js 中default任务gulpfile.babel.js#L197-L204依次执行clean、styles、lint、html、scripts、images、copy和generate-service-worker把全部可运行资源输出到dist目录。也就是说dist里已经是一份完整的、可独立托管的站点Firebase 只需负责把它原样发布出去。前置准备先让 WSK 在本机跑起来在执行部署之前请先按 docs/install.md 完成环境准备Node.js终端执行node --version版本需在 0.10.x 以上package.json 的engines字段标注node 0.12Gulp执行gulp --version版本需在 3.9.x 以上若未安装则执行npm install --global gulp项目本地依赖npm install若安装了 Yarn也可以直接运行yarn仓库内已包含 yarn.lock。这些工具是后续gulp构建的前提构建产物dist正是要上传到 Firebase 的内容。部署流程从注册到上线以下步骤完整继承自官方文档 docs/deploy-firebase.md并结合仓库源码补充说明。第 1 步注册 Firebase 账户前往 Firebase 官网注册免费账户。如果还没有创建任何应用稍后firebase init时会看到一个随机生成的默认应用直接使用它即可也可以先登录 Firebase 控制台创建一个新应用以便在初始化时选用。第 2 步安装 Firebase 命令行工具npm install -g firebase-tools-g标志指示npm全局安装该包从而可以在任意目录使用firebase命令。如果当前系统权限不足可能需要以sudo权限执行安装例如sudo npm install -g firebase-tools。第 3 步登录 Firebase 账户firebase login该命令会打开浏览器完成 OAuth 授权并将凭据保存在本机后续firebase init与firebase deploy均基于此登录态工作。第 4 步进入项目目录并初始化cd your-web-starter-kit-project firebase init初始化时 Firebase 会询问选择托管应用刚注册的用户会看到一个随机命名的应用直接选择即可否则在控制台创建新应用后再回来选择设置 public 目录此处必须输入dist。之所以填dist是因为运行gulp构建后WSK 会把所有产物压缩合并后的 HTML/CSS/JS、优化后的图片、manifest.json、robots.txt等统一输出到dist见 gulpfile.babel.js#L197-L204 的任务编排。因此dist已经包含站点运行所需的全部文件。第 5 步构建生产版本gulp执行gulp即运行default任务其内部通过runSequence串联gulpfile.babel.js#L197-L204clean清空.tmp与dist保留dist/.gitgulpfile.babel.js#L156stylesSass 编译、Autoprefixer 加前缀、cssnano 压缩并生成 sourcemap输出到dist/styleslint对app/scripts/**/*.js执行 ESLint遵循eslint-config-google见 package.json 的eslintConfightml通过useref扫描 HTML 中的资源引用并用 htmlmin 压缩输出到distscriptsBabel 转译 ES2015、concat 合并为main.min.js、uglify 压缩输出到dist/scriptsimagesimagemin 优化图片输出到dist/imagescopy复制根级非 HTML 文件robots.txt、humans.txt、favicon.ico、manifest.json等见 gulpfile.babel.js#L60-L69generate-service-worker用 sw-precache 在dist下生成service-worker.js详见下文。构建结束后dist目录即为可部署的完整站点。第 6 步执行部署firebase deploy部署完成后终端输出中会列出线上站点的访问 URL。Firebase Hosting 默认提供 Pretty URLs站点根目录对应的index.html可直接以/访问而无需在网址中暴露.html后缀这正是指南标题中 Pretty URLs 的含义。深入理解dist产物与 Service Worker 离线能力将 public 目录设置为dist不仅因为它是构建输出目录还因为其中包含一份构建时生成的 Service Worker。generate-service-worker任务gulpfile.babel.js#L228-L252使用 sw-precache 生成 app/service-worker.js构建时写入dist/service-worker.js其要点包括cacheId取自 package.json 的name默认为web-starter-kit用于避免本地缓存冲突importScripts引入scripts/sw/sw-toolbox.js与scripts/sw/runtime-caching.js其中 app/scripts/sw/runtime-caching.js 负责运行时缓存策略staticFileGlobs覆盖dist下的图片、脚本、样式与*.html/*.json实现资源预缓存stripPrefix将dist/前缀剥离使缓存键对应线上 URL。正如 README.md 所述将dist部署到 HTTPS 域名Firebase Hosting 自带后即可获得离线支持在支持 Service Worker 的浏览器中站点资源会直接从 Service Worker 缓存加载。Firebase 的免费 HTTPS 托管恰好满足 Service Worker 的注册前提这也是选择 Firebase 部署 WSK 的一大收益。构建前请勿删除app/service-worker.js占位文件——它在app阶段用于开发服务器gulp serve真正可用的缓存版本由构建过程生成。部署前验证本地预览构建产物正式firebase deploy前建议先本地预览生产构建避免把问题带到线上。在 docs/commands.md 中提供了对应命令gulp serve:distserve:dist会先执行default构建然后在 3001 端口用 BrowserSync 伺服dist目录gulpfile.babel.js#L181-L194。与gulp serve3000 端口、基于app目录、无缓存不同serve:dist使用 sw-precache 生成的 Service Worker可验证离线与缓存行为且两个端口隔离了各自的 Service Worker 作用域互不干扰。确认无误后再执行gulp与firebase deploy即可放心上线。常见问题与注意事项firebase命令找不到确认npm install -g firebase-tools已成功且 npm 全局 bin 目录在PATH中macOS/Linux 下可能需要sudo。public 目录填错初始化时若填成app而非dist会部署未经优化的开发源码并丢失构建生成的 Service Worker可重新执行firebase init或在firebase.json中修正public字段。登录态失效部署报认证错误时重新执行firebase login。部署后未看到最新内容Firebase Hosting 可能有短暂的缓存传播延迟若页面被 Service Worker 缓存可在浏览器中强制刷新一次。延伸阅读docs/deploy.mdWSK 的部署指南索引除 Firebase 外还覆盖 Google App Engine 等方案对应的 docs/deploy-appengine.md 展示了另一种静态托管思路docs/commands.mdgulp、gulp serve、gulp serve:dist、gulp pagespeed等命令的完整说明docs/install.mdNode.js、Gulp 与本地依赖的安装细节docs/file-appendix.mdgulpfile.babel.js、app/service-worker.js、package.json等文件的作用说明gulpfile.babel.js 与 package.json构建任务编排与工具链依赖的源码级参考。赞分享前端示例工程【免费下载链接】web-starter-kitWeb Starter Kit - a workflow for multi-device websites项目地址https://gitcode.com/gh_mirrors/webs/web-starter-kit点击查看免费下载相关推荐Express-Generator命令行选项详解10个实用技巧快速提升开发效率Express Generator命令行选项详解10个实用技巧快速提升开发效率 Express Generator是Node.js生态中最受欢迎的脚手架工具之前端示例工程如何告别Node.js版本冲突nvm-desktop图形化版本管理终极指南如何告别Node.js版本冲突nvm desktop图形化版本管理终极指南 还在为不同Node.js项目版本切换而烦恼吗nvm desktop桌面应用让你彻桌面应用CLI开发工具NCE应时新概念英语构建你的英语学习数字图书馆NCE应时新概念英语构建你的英语学习数字图书馆 你是否曾为寻找高质量、系统化的英语学习资料而烦恼在信息爆炸的时代如何从海量资源中筛选出真正有价值的英语教材教育上一篇全面战争MOD管理终极指南如何用虎符台告别MOD混乱时代下一篇NetBox 数据源DataSource完全指南从本地目录、Git 仓库到 S3 的配置与同步机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web Starter Kit 部署到 Firebase Hosting：使用 Pretty URLs 五分钟上线静态站点
前端示例工程【免费下载链接】web-starter-kitWeb Starter Kit - a workflow for multi-device websites项目地址https://gitcode.com/gh_mirrors/webs/web-starter-kit点击查看免费下载本文是一份以 Web Starter KitWSK官方部署文档 docs/deploy-firebase.md 为主体的实战指南讲解如何将基于 WSK 构建的多设备站点部署到 Firebase Hosting并以「Pretty URLs」无.html后缀的整洁网址对外提供访问。读者按本文操作即可完成从注册 Firebase 账户、安装命令行工具、构建dist产物到正式上线的完整流程同时理解 WSK 的构建产物为何能直接作为 Firebase 静态托管目录。为什么选择 Firebase 部署 WSKFirebase 是部署 Web Starter Kit 站点非常简单且安全的方式注册免费账户后在 5 分钟内即可完成部署。对于 WSK 这类完全静态的站点页面、样式、脚本、图片以及构建时生成的 Service WorkerFirebase Hosting 提供了开箱即用的 HTTPS 支持与全球 CDN 分发无需维护服务器。这一点与 WSK 的定位高度契合——WSK 的构建产物本身就是一套纯静态文件。在 gulpfile.babel.js 中default任务gulpfile.babel.js#L197-L204依次执行clean、styles、lint、html、scripts、images、copy和generate-service-worker把全部可运行资源输出到dist目录。也就是说dist里已经是一份完整的、可独立托管的站点Firebase 只需负责把它原样发布出去。前置准备先让 WSK 在本机跑起来在执行部署之前请先按 docs/install.md 完成环境准备Node.js终端执行node --version版本需在 0.10.x 以上package.json 的engines字段标注node 0.12Gulp执行gulp --version版本需在 3.9.x 以上若未安装则执行npm install --global gulp项目本地依赖npm install若安装了 Yarn也可以直接运行yarn仓库内已包含 yarn.lock。这些工具是后续gulp构建的前提构建产物dist正是要上传到 Firebase 的内容。部署流程从注册到上线以下步骤完整继承自官方文档 docs/deploy-firebase.md并结合仓库源码补充说明。第 1 步注册 Firebase 账户前往 Firebase 官网注册免费账户。如果还没有创建任何应用稍后firebase init时会看到一个随机生成的默认应用直接使用它即可也可以先登录 Firebase 控制台创建一个新应用以便在初始化时选用。第 2 步安装 Firebase 命令行工具npm install -g firebase-tools-g标志指示npm全局安装该包从而可以在任意目录使用firebase命令。如果当前系统权限不足可能需要以sudo权限执行安装例如sudo npm install -g firebase-tools。第 3 步登录 Firebase 账户firebase login该命令会打开浏览器完成 OAuth 授权并将凭据保存在本机后续firebase init与firebase deploy均基于此登录态工作。第 4 步进入项目目录并初始化cd your-web-starter-kit-project firebase init初始化时 Firebase 会询问选择托管应用刚注册的用户会看到一个随机命名的应用直接选择即可否则在控制台创建新应用后再回来选择设置 public 目录此处必须输入dist。之所以填dist是因为运行gulp构建后WSK 会把所有产物压缩合并后的 HTML/CSS/JS、优化后的图片、manifest.json、robots.txt等统一输出到dist见 gulpfile.babel.js#L197-L204 的任务编排。因此dist已经包含站点运行所需的全部文件。第 5 步构建生产版本gulp执行gulp即运行default任务其内部通过runSequence串联gulpfile.babel.js#L197-L204clean清空.tmp与dist保留dist/.gitgulpfile.babel.js#L156stylesSass 编译、Autoprefixer 加前缀、cssnano 压缩并生成 sourcemap输出到dist/styleslint对app/scripts/**/*.js执行 ESLint遵循eslint-config-google见 package.json 的eslintConfightml通过useref扫描 HTML 中的资源引用并用 htmlmin 压缩输出到distscriptsBabel 转译 ES2015、concat 合并为main.min.js、uglify 压缩输出到dist/scriptsimagesimagemin 优化图片输出到dist/imagescopy复制根级非 HTML 文件robots.txt、humans.txt、favicon.ico、manifest.json等见 gulpfile.babel.js#L60-L69generate-service-worker用 sw-precache 在dist下生成service-worker.js详见下文。构建结束后dist目录即为可部署的完整站点。第 6 步执行部署firebase deploy部署完成后终端输出中会列出线上站点的访问 URL。Firebase Hosting 默认提供 Pretty URLs站点根目录对应的index.html可直接以/访问而无需在网址中暴露.html后缀这正是指南标题中 Pretty URLs 的含义。深入理解dist产物与 Service Worker 离线能力将 public 目录设置为dist不仅因为它是构建输出目录还因为其中包含一份构建时生成的 Service Worker。generate-service-worker任务gulpfile.babel.js#L228-L252使用 sw-precache 生成 app/service-worker.js构建时写入dist/service-worker.js其要点包括cacheId取自 package.json 的name默认为web-starter-kit用于避免本地缓存冲突importScripts引入scripts/sw/sw-toolbox.js与scripts/sw/runtime-caching.js其中 app/scripts/sw/runtime-caching.js 负责运行时缓存策略staticFileGlobs覆盖dist下的图片、脚本、样式与*.html/*.json实现资源预缓存stripPrefix将dist/前缀剥离使缓存键对应线上 URL。正如 README.md 所述将dist部署到 HTTPS 域名Firebase Hosting 自带后即可获得离线支持在支持 Service Worker 的浏览器中站点资源会直接从 Service Worker 缓存加载。Firebase 的免费 HTTPS 托管恰好满足 Service Worker 的注册前提这也是选择 Firebase 部署 WSK 的一大收益。构建前请勿删除app/service-worker.js占位文件——它在app阶段用于开发服务器gulp serve真正可用的缓存版本由构建过程生成。部署前验证本地预览构建产物正式firebase deploy前建议先本地预览生产构建避免把问题带到线上。在 docs/commands.md 中提供了对应命令gulp serve:distserve:dist会先执行default构建然后在 3001 端口用 BrowserSync 伺服dist目录gulpfile.babel.js#L181-L194。与gulp serve3000 端口、基于app目录、无缓存不同serve:dist使用 sw-precache 生成的 Service Worker可验证离线与缓存行为且两个端口隔离了各自的 Service Worker 作用域互不干扰。确认无误后再执行gulp与firebase deploy即可放心上线。常见问题与注意事项firebase命令找不到确认npm install -g firebase-tools已成功且 npm 全局 bin 目录在PATH中macOS/Linux 下可能需要sudo。public 目录填错初始化时若填成app而非dist会部署未经优化的开发源码并丢失构建生成的 Service Worker可重新执行firebase init或在firebase.json中修正public字段。登录态失效部署报认证错误时重新执行firebase login。部署后未看到最新内容Firebase Hosting 可能有短暂的缓存传播延迟若页面被 Service Worker 缓存可在浏览器中强制刷新一次。延伸阅读docs/deploy.mdWSK 的部署指南索引除 Firebase 外还覆盖 Google App Engine 等方案对应的 docs/deploy-appengine.md 展示了另一种静态托管思路docs/commands.mdgulp、gulp serve、gulp serve:dist、gulp pagespeed等命令的完整说明docs/install.mdNode.js、Gulp 与本地依赖的安装细节docs/file-appendix.mdgulpfile.babel.js、app/service-worker.js、package.json等文件的作用说明gulpfile.babel.js 与 package.json构建任务编排与工具链依赖的源码级参考。赞分享前端示例工程【免费下载链接】web-starter-kitWeb Starter Kit - a workflow for multi-device websites项目地址https://gitcode.com/gh_mirrors/webs/web-starter-kit点击查看免费下载相关推荐Express-Generator命令行选项详解10个实用技巧快速提升开发效率Express Generator命令行选项详解10个实用技巧快速提升开发效率 Express Generator是Node.js生态中最受欢迎的脚手架工具之前端示例工程如何告别Node.js版本冲突nvm-desktop图形化版本管理终极指南如何告别Node.js版本冲突nvm desktop图形化版本管理终极指南 还在为不同Node.js项目版本切换而烦恼吗nvm desktop桌面应用让你彻桌面应用CLI开发工具NCE应时新概念英语构建你的英语学习数字图书馆NCE应时新概念英语构建你的英语学习数字图书馆 你是否曾为寻找高质量、系统化的英语学习资料而烦恼在信息爆炸的时代如何从海量资源中筛选出真正有价值的英语教材教育上一篇全面战争MOD管理终极指南如何用虎符台告别MOD混乱时代下一篇NetBox 数据源DataSource完全指南从本地目录、Git 仓库到 S3 的配置与同步机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考