在前端开发中，生成器是一个非常重要的工具，它可以帮助我们快速搭建项目框架，减少开发难度。而 generator-nomatic-web-material 就是一个非常实用的前端项目生成器。
本篇文章将会介绍 generator-nomatic-web-material 的使用方法，并通过实际示例展示该工具的深度和指导意义。
安装 generator-nomatic-web-material
首先，我们需要安装 yeoman 与 generator-nomatic-web-material。
--- ------- -- -- ------------------------------
创建项目
安装完成后，我们可以通过以下命令创建新的项目：
-- --------------------
我们会在命令行看到一系列的问题，需要回答。这些问题主要是一些设置，按照需求进行填写即可。
项目结构
创建项目之后，我们可以看到该项目的结构如下：
--- ---- - --- ------- - --- -------- - - --- ------- - --- ------- - - --- --------- - --- ---------- --- ----------- --- ------------ --- ---------
在这个结构中，app 目录包含了项目源文件，主要是图片、JavaScript 和样式文件。gulpfile.js 文件是用来管理打包和编译的 Gulp 任务。package.json 则包含了项目的所有依赖。
Gulp 任务
generator-nomatic-web-material 预先配置了一些 Gulp 任务，这些任务将帮助我们完成如下操作：
- 把 SCSS 文件编译成 CSS。
- 压缩和合并 JavaScript 文件。
- 图片有多种类型，上传后应该进行压缩和处理。
- 生成本地服务器和浏览器刷新。
在命令行中，我们可以通过输入以下命令运行这些任务：
----
这个命令将使用默认配置来启动本地服务器，并且在编辑过程中，每次保存文件都会自动刷新页面。如果需要使用生产模式打包项目，我们可以运行以下命令：
---- -----
一个示例
在介绍 generator-nomatic-web-material 的具体使用方法之前，我们先从一个简单的示例开始。
我们的示例目录结构如下：
--- ---- - --- ------- - --- -------- - - --- ------- - --- ------- - - --- --------- - --- ---------- --- ----------- --- ------------ --- ---------
然后我们修改 index.html 文件，添加一个标题。文件内容如下：
--------- -----
----- ----------
------
----- ----------------
---------- -------- ---------------
-------
------
--------- ----------
------- -------------------------------
-------
-------接着，我们在 app/scripts 目录中创建 main.js 文件，实现在页面上输出“hello world”。文件内容如下：
------------------ ---------
最后，在 app/styles 目录中创建 main.scss 文件并添加以下内容：
-- - ------------ --------- ----------- ---------- ----- ------ ----- -
现在运行 $ gulp 命令，我们就可以在浏览器中看到一个标题为“Hello world”的页面了。
使用 Material Design
通过 generator-nomatic-web-material，我们可以很容易地使用 Material Design，只需要运行以下命令：
-- -----------------------------
这个命令会向我们提出一些问题，根据自己的需求进行回答即可。完成之后，会在我们的项目中添加 Material Design 的样式和代码。
总结
使用 generator-nomatic-web-material ，我们可以轻松地搭建出一个前端项目框架，并在其中使用 Material Design。当然，除此之外，它还有许多其他的实用功能，例如 CSS 预处理器、自动化任务、性能优化等等。
通过这篇文章，希望读者能够了解到如何使用 generator-nomatic-web-material，并在实际项目中加以应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562de81e8991b448e059e