前言
在开发前端项目时，我们经常需要创建一些基础的文件和目录。如果每次都手动创建的话，工作量将会非常大。这时候，我们可以使用 Yeoman 来帮助我们自动创建项目的基础框架。
generator-wp-app 是一个 Yeoman generator，它可以帮我们快速地创建一个基于 WordPress 开发的 Web 应用。
本文将介绍 generator-wp-app 的使用方法，并提供一些示例代码，希望能帮助读者更加顺利地使用这个工具。
安装
首先，我们需要先安装 Node.js 和 Yeoman。如果你还没有安装的话，可以通过以下命令安装：
brew install node npm install -g yo
安装好了 Node.js 和 Yeoman 之后，我们就可以安装 generator-wp-app 了。可以通过以下命令进行安装：
npm install -g generator-wp-app
创建项目
安装完 generator-wp-app 之后，我们就可以创建一个项目了。进入项目的目录，执行以下命令：
yo wp-app
然后，你将会被要求输入一些基础信息，比如项目名称、作者、描述等等。输入完毕后，generator-wp-app 就会开始自动生成项目的基础框架。
生成的文件结构如下：
-- -------------------- ---- -------
-
--- ------------
--- ------------
--- ---------
--- ---
- --- -----
- --- ------
- --- ----------
- --- --
- --- ----
- --- ---------
--- -----
--- ----------
--- -------其中，Gruntfile.js 是使用 grunt 的配置文件；package.json 是项目的基础配置文件；src 目录包含了项目的源码；tests 目录包含了项目的测试代码。
项目开发
在生成了项目的基础框架之后，我们就可以开始进行项目开发了。我们来看一下项目生成的文件结构：
└── src
├── fonts
├── images
├── index.html
├── js
├── scss
└── style.css样式开发
我们可以将样式文件放在 scss 目录下。generator-wp-app 使用了 Sass 来进行样式预处理，因此我们需要安装 Sass 才能使用。
npm install -g sass
安装好之后，我们就可以在 scss 目录下创建一个样式文件，比如 style.scss，并使用以下命令将其编译成 css 文件：
sass src/scss/style.scss src/style.css
脚本开发
脚本文件放在 js 目录下。generator-wp-app 使用了 Browserify 来进行 JavaScript 模块化开发，因此我们需要安装 Browserify 才能使用。
npm install -g browserify
安装好之后，我们可以创建一个 JavaScript 文件，比如 main.js，并使用以下命令将其编译成一个 bundle.js 文件：
browserify src/js/main.js -o src/js/bundle.js
图片和字体
图片和字体文件分别放在 images 和 fonts 目录下。generator-wp-app 将这两个目录拷贝到了生成的项目中，我们可以直接在这两个目录下存放这些文件。
构建项目
在开发完项目之后，我们需要将代码打包，并压缩成一个最小的文件，以供在生产环境中使用。
我们可以使用以下命令将项目构建:
grunt build
此时，生成的代码将会被编译、压缩和优化，生成的文件会放在 dist 目录下。
总结
本文介绍了 npm 包 generator-wp-app 的使用方法，包括安装、创建项目、项目开发和构建项目。希望能够帮助前端开发者更加方便地开发基于 WordPress 的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea281e8991b448e76be