简介
generator-webapp-simple 是一个基于 Yeoman 的 webapp 生成器。该生成器通过使用已有的技术栈，如 babel、webpack 和 gulp 等，帮助开发者快速创建一个现代化的 web 应用程序。
安装依赖
使用 generator-webapp-simple 前，需要提前安装 node.js 和 npm，并且确保版本都是最新的。
执行以下命令安装 generator-webapp-simple：
npm install -g yo generator-webapp-simple
创建 webapp
执行以下命令，并根据提示输入项目名称、描述等信息，即可创建一个新的 webapp：
yo webapp-simple
生成器会自动下载所需的依赖，并创建一个包含默认配置的项目。此时，您可以进入项目目录，并查看生成的文件结构。
文件结构
使用 generator-webapp-simple 创建的项目默认包含以下文件：
- public：存放静态资源文件。
- src：存放开发文件，包含 HTML、JavaScript、CSS、图片等。
- gulpfile.js：gulp 的配置文件，定义了一些自动化构建任务。
- package.json：npm 的配置文件，定义了项目所需的依赖和 scripts 等信息。
运行项目
进入项目目录，执行以下命令启动项目：
npm start
此时，浏览器会自动打开 http://localhost:9000，并展示已经生成的 web 界面。
自定义项目配置
generator-webapp-simple 提供一些默认配置，但是您可能需要进行个性化定制，比如修改端口号、指定浏览器、添加自定义的 gulp 任务等。在执行 yo webapp-simple 命令时，您可以选择使用交互模式，根据提示进行配置。
另外，您也可以直接编辑 gulpfile.js 文件，并添加自己的任务函数。此时，需要先了解 gulp 的基本操作和语法。
下面是一个简单的示例，用于压缩图片：
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
gulp.task('build:image', () => {
return gulp.src('./src/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./public/img'));
});总结
generator-webapp-simple 是一个实用的 webapp 生成器，可帮助开发者快速启动项目并快速开发。通过了解和使用 generator-webapp-simple，您可以更深入地理解现代 web 开发的工具链，并掌握一些自动化构建的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005539b81e8991b448d0d72