前言
在前端开发中，我们经常需要创建新的项目或者添加新的模块，这时候就需要使用生成器工具。npm 上有很多种类似的生成器，但是今天我们主要介绍的是 @metalab/generator-web 这个生成器。
@metalab/generator-web 是基于 Yeoman 生成器的一个工具，用于帮助我们快速搭建一个 Web 项目，并且提供了很多脚手架工具和任务自动化构建工具。
在此之前，我们需要安装以下几个工具：
- node.js
- npm
- Yeoman
如果你没有安装过，可以参考官方文档进行安装。
安装 @metalab/generator-web
使用 npm 安装 generator-web 。
$ npm install -g @metalab/generator-web
创建新项目
使用命令生成一个新项目：
$ yo @metalab/web
此时终端会提示你: "Welcome to metalab's generator-web!"。 接着，它就会在当前目录下生成默认的项目。项目目录结构如下：
-- -------------------- ---- ------- - --- ----------- --- --- - --- ------ - --- ------- - - --- ------- - --- ------ - --- -------- --- ------------ --- --------- --- ----------
目录结构
gulpfile.js是任务自动化脚本。src/文件夹包含了我们的源代码，包含了 JS 代码，CSS 代码以及图片资源。src/scripts/main.js是我们的主 JS 文件。src/styles/main.css是我们的主 CSS 文件。package.json是项目的元数据文件。README.md是项目的介绍文件。index.html是我们的主 HTML 文件。
运行项目
现在我们已经创建了一个新的项目，我们可以通过以下命令来启动项目：
$ npm start
这个命令会执行 gulpfile.js 里面的任务，启动本地的 Web 服务器，并在浏览器打开默认地址 http://localhost:8080。
打包项目
在生成的项目中已经包含了任务自动化脚本，在这里我们使用 Gulp 来构建项目。
构建前，需要安装 gulp-cli，使用以下命令安装：
$ npm install -g gulp-cli
然后在项目目录中，使用以下命令构建项目：
$ gulp build
该命令会将项目的代码打包成在 dist 目录中生成一个可部署的版本。
项目的配置文件：gulpfile.js 和 package.json 中已经包含了所有项目所需依赖。
总结
总之，在前端开发中，@metalab/generator-web 是一个很好的脚手架工具，可以快速生成一个 Web 项目，并提供了许多需要的脚手架工具和任务自动化构建工具。您可以使用本教程提供的基础知识来学习如何使用这个工具，为您的下一个项目提供方便快捷的开发环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244674