在 Web 前端的开发过程中，快速构建静态页面是一个非常重要的工作。npm 包 generator-landingpages 就是一个快速生成静态页面的工具。generator-landingpages 的好处在于：
- 自动化构建页面结构及所需的文件目录结构
- 通过 webpack 实时编译，重新加载发生变化的文件
- 可自动压缩生成的静态页面
本文将详细介绍如何使用 generator-landingpages 生成静态页面。
安装 generator-landingpages
首先你需要在本地安装 Yeoman，而 Yeoman 可以通过 npm 安装：
--- ------- -- --
接下来，我们就可以安装 generator-landingpages 了。同样，需要通过 npm 安装：
--- ------- -- ----------------------
使用 generator-landingpages
安装完成后，我们就可以开始使用 generator-landingpages 了。
- 首先在你要生成页面的目录下，打开命令行工具
- 输入命令
yo landingpages，即可开始生成页面
接下来，你需要根据命令行提示，依次输入页面名称、页面标题等信息。
在信息输入完成后，generator-landingpages 会自动生成一个完整的静态页面文件目录结构。其中，包括了 css、images、js 等文件夹，以及 index.html 等页面文件。此外，generator-landingpages 还会自动添加 webpack 配置文件、自动添加所需的 npm 包，并启动 webpack 编译。
在编译完成后，你就可以在浏览器中访问生成的页面了。
修改页面
生成的页面虽然结构已经很完整了，但其中的内容并不适用于所有的项目。因此，我们需要在生成的页面基础上进行修改。
我们可以在 所以生成的文件夹和文件中，那你要修改内容的文件夹和文件，例如：
--- --- --- --- ------ --- -- --- ----------
这里以修改 index.html 文件为例。在编辑器中打开该文件，就能看到页面的基本结构，包括头部、导航、内容区等各部分。
在修改页面内容时，我们需要注意以下几点：
引入外部资源
如果你在生成页面时勾选了像 Bootstrap、JQuery 这样的外部库或者使用外部的样式或脚本文件，需要在 index.html 文件中通过 link 或 script 标签进行引入。通常情况下，外部资源都已经预置在 index.html 中。
自定义样式
在 app\css 目录下我们可以看到 custom.scss 和 main.scss，这两个文件是我们自定义样式，通常我们在 custom.scss 文件中写入我们自己的样式。
如果需要使用其他的外部样式，可以在相应的地方进行引用。比如，修改 main.scss:
-- ------- --- ------- ------- ------------------------------------------------ -- --------- ---- - ----------------- ----- ------ ----- -
资源路径
在修改页面时，如果需要引用 css、images、fonts 或者 js 文件，需要注意这些文件的路径。
在 generator-landingpages 生成的项目中，资源的路径一般开头为 /static，所以在编写引用的路径时，我们需要注意添加这一路径。
例如，我们在 index.html 文件中引入了 app\css\custom.scss 文件，那么应该写成：
---- --------------------------- --- ----- ---------------- ------------------------------
修改页面
在修改完页面内容后，还需要重新编译生成页面，才能看到修改后的效果。
构建
最后，在完成页面修改后，我们可以进行打包构建，即将所有资源进行压缩，以方便发布。构建的方式很简单，只需要在命令行中输入以下指令即可：
--- --- -----
运行后，generator-landingpages 就会自动压缩所有资源，并生成压缩包，放置在 dist 目录下。
总结
本文详细介绍了 npm 包 generator-landingpages 的安装、使用方法，以及修改页面内容和构建打包的相关内容。在实际开发中，可以根据需要进行具体的调整。
完整的示例代码可以在 我的Github 上查看。
希望本文能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57938