简介
Generator-pms 是一个基于 Yeoman 生成器的 NPM 包，可以快速创建一个前端项目结构，并自动安装常用的依赖包。使用 generator-pms，可以省去创建项目的繁琐过程，让开发人员更专注于业务和功能的开发。
安装 Generator-pms
首先需要确保已经安装了 Node.js 和 npm，然后在终端输入以下命令进行全局安装：
npm install -g generator-pms
使用 Generator-pms
安装完成后，执行以下命令：
yo pms
然后按照提示回答问题，即可创建一个新的项目。
项目结构
生成的项目结构如下所示：
-- -------------------- ---- -------
-
--- ---------
--- -----------
--- ------------
--- ----
- --- ---
- --- -----
- --- --
--- ---
--- ---
- --- --------
--- ------
- --- -----
- --- ------
--- ----
- --- ---------
--- ---------
--- ----------以下是对每个目录的功能介绍：
dist：生成的最终文件，包含已经编译好的 HTML、CSS、JS 文件以及所需的图片和字体文件等。src：源代码目录，包含待编译的 SASS 文件、HTML 模板、JS 文件等。src/sass：包含所有 SASS 源文件，其中main.scss是项目的入口文件。src/templates：包含所有 HTML 模板文件。src/app：包含所有的 JS 源文件，其中index.js是项目的入口文件。src/assets：包含所有的图片和字体文件。
Gulpfile.js 配置文件
使用 Generator-pms 只需要正确回答问题，就能默认使用已有的配置文件，不过仍然需要了解它的一些配置选项。如下是 Gulpfile.js 配置文件的部分内容：
-- -------------------- ---- -------
--- ------ - -
------- ------
-------- -------
--- -
---- -
-------------
--
----- -----
----------- -
------ ----
-
--
---- -
---- -
----------------
--
----- -----
--
----- -
------ -
---------------
-
--
------- -
-------- ------
-
--以下是对每个配置选项的详细介绍：
srcDir：项目源代码目录。distDir：项目生成的最终文件目录。js.src：待编译的 JS 文件目录。js.dist：编译后 JS 文件所在目录。js.browserify.debug：是否使用 sourcemaps 。css.src：待编译的 SASS 文件目录。css.dist：编译后 CSS 文件所在目录。html.watch：HTML 模板文件所在目录。server.baseDir：本地服务器的根目录。
示例代码
以下是 SASS 文件的示例代码：
-- -------------------- ---- -------
--------------- --------
---- -
----------- -----
----- -------- ---------- ------ ---------- ------ -----------
------ -----
-
--- --- --- --- --- -- -
----------- --
-
- -
------ ---------------
--------
------- -
------ ---------------------- -----
-
-以下是 JS 文件的示例代码：
var $ = require('jquery');
$(function() {
console.log('Document is ready');
});总结
使用 Generator-pms 可以为前端开发人员省去很多创建项目的繁琐步骤，只需要根据提示回答一些问题，即可快速创建一个基础的项目结构，并自动安装常用的依赖包。同时，通过深入学习 Gulpfile.js 配置文件，开发人员可以自定义项目的构建流程，如添加更多自动化处理，使得开发效率更高，项目质量更好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8881e8991b448e6018