generator-h5-boilerplate 是一个基于 Yeoman 的前端工具，可以快速生成 H5 项目的基础框架，包括 HTML、CSS、JavaScript 和图片文件的结构，在此基础上可以快速开发前端功能。在此文章中，我们将一步步介绍如何使用 generator-h5-boilerplate。
1. 安装 Yeoman 和 generator-h5-boilerplate
在开始之前，首先需要安装 Yeoman 和 generator-h5-boilerplate。在控制台输入以下命令：
npm install -g yo generator-h5-boilerplate
这个命令将全局安装 Yeoman 和 generator-h5-boilerplate。
2. 创建项目并生成 H5 框架
进入你的项目文件夹，然后输入以下命令：
yo h5-boilerplate
之后 Yeoman 会开始生成 H5 框架。在生成的过程中，你需要输入一些信息，如项目名、作者信息等等。通过这个操作，会自动生成 H5 基础框架结构，包括 HTML 文件、CSS 文件、JavaScript 文件、图片文件以及其他必要的文件。
3. 给项目添加页面
在 Yeoman 生成的基础框架结构下，你可以添加新的页面。在项目的 "src" 文件夹中新建一个 HTML 文件，然后在 "gulpfile.js" 中添加相应的任务及路径。例如：
gulp.task('page', function () { return gulp.src(['src/**/*.html']) .pipe(gulp.dest('dist')); });
这个任务将 "src" 目录下的所有 HTML 文件复制到 "dist" 目录下。
在 HTML 文件中，你需要引入项目所需的 CSS、JavaScript 以及图片等文件。在这里我们推荐使用 webpack 或者其他的构建工具，这里我们以 webpack 为例：
import './style.css'; import './script.js';
这样你就可以在 HTML 文件中使用编写好的样式表和脚本文件了。
4. 打包和部署项目
当你完成了项目开发后，你需要将项目打包并部署到服务器上。在项目根目录运行以下命令：
npm run build这个命令将会使用 webpack 打包项目并输出到 "dist" 目录下。
接下来，你可以将生成的 "dist" 文件夹部署到服务器上，例如使用 FTP 工具将 "dist" 目录上传到服务器，或者将其部署到 GitHub Pages 等静态网页托管平台上。
总结
在这篇文章中，我们介绍了如何使用 generator-h5-boilerplate 生成 H5 项目的基础框架，以及如何添加页面、打包和部署项目。generator-h5-boilerplate 提供了快速开发项目的便利，让我们可以更加高效地开发前端功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbc81e8991b448da4b6
