前端工程化：根据标准和规范，通过工具提升效率降低成本的一种手段。?????
它的出现是为了解决诸如 ES6 兼容， less sass 使用 ，模块化 、 组件化以及代码的压缩和上传过程中的失误等问题。
脚手架开发
脚手架的重要功能除了创建文件之外，更多的是给开发者提供一些规范如文件结构，工具配置，?？橐览档?。
现在市面上流行的 React 、Vue 都有自己对应的脚手架 如 create-react-app 、 vue-cli。这些很成熟，但是创建的都是针对性的实例。
相对以前的 Yeoman 来说，灵活度上差一些。但是我们一般都针对框架进行开发，所以也不需要灵活度，这里提到，仅供学习。。。
Yeoman 更像是一个脚手架平台，会根据你提供的 Generator 生成不同的脚手架。
这里我们生成一个 node 项目 ，所以安装一下?Yeoman 和?Generator-node 。
Yeoman 安装 ：yarn global add yo
Generator-node 安装：yarn global add generator-node
通过 yo node 命令创建一个 node 项目，
然后可以得到一个创建好的 node 项目
通过以上操作，我们可以得到一个想要的目录结构。所谓灵活呢，也就是所供选择的结构 也就是?Generator 比较多，我们选一个自己需要的，然后进行创建。
好说了这么多。我们来自己写一个脚手架，也就是再去自定义一个 Generator?。
创建?Generator 实际上就是创建一个 NPM 模块，但是它有特定结构。
它的名称必须以 generator-<name> 的格式，不然 yeoman 会找不到。
我们首先创建一个?generator?格式的文件夹?mkdir generator-test 。
通过?yarn add yeoman-generator 安装一个?？椋渲刑峁┮桓?generator 基类，其中存在一些工具函数，让我们更方便创建一个?generator?。
通过?yarn init?生成一个?package.json?文件。然后根据目录结构创建文件夹。
然后我们在 index 中编写一段代码， 他是核心入口，需要导入?yeoman-generator ，yeoman-generator?在工作室会自动调用我们定义的一些生命周期方法。我们在这些方法中，可以通过父类提供的一些方法，实现一些功能。
然后我们执行 yarn link 把这个?？榱唇拥饺址段В顾晌桓鋈帜？榘?。以便于 yeoman 找到。然后我们 通过 yo test 试一下，发现创建了一个 test.txt 文件。打开可以看到内容可我们预期一致（图7.4），这也证明这个最简单的?generator 是没问题的。
我们实际应用场景，所需要创建的文件比较多，文件内容也相对复杂。这时候我们可以通过模板来进行创建。我们首先需要创建模板，我们在 app 文件夹下，创建提个 templates 文件来存储模板。模板内部支持 EJS 语法。
然后我们引入模板，复制到指定地址，并传入参数，如 图7..5 。
然后执行 yarn test 命令，生成 test 文件，打开发现和我们的模板一致，根据模板生成文件也就没问题了。
对于一些数据，如项目名称等?；嵬ü钚行陆ㄊ焙蛏?，所以我们需要接收用户的输入，现在我们来实现一下。我们需要借助父类的 prompt 方法，来与用户进行询问。代码如下 图7.8?
我们得到了一个 answers ，然后然后然他成为文件名 ，如 图7.9 。
接着我们执行 yo test ，果然看到一个询问，我们输入文件名，创建了一个如我们输入相同的文件名。
现在我们这些处理办法都有了，我们来试着写一个生成 Vue 框架的脚手架。
我们先创建一个基础目录结构。然后再 templas 中提前准备要一个目录结构（直接去 vue 项目上粘一个）作为模板，然后去处理模板，因为只是一个简单样例，所以我们只把模板文件中的文件名相关处理一下。主要是下面这三个地方， 如 图7.11 。
然后主代码的?prompting 部分与之前一样，我只询问了项目名称。?writing 部分因为多个文件，所以整理了一个文件数组，以遍历的方式复制过去（已经瞎了）。
然后 yarn link，切到目标文件执行?yo hwz-vue 创建项目。
可以看到目录结构和工程名称都没有问题，因为没弄 nod_moudle 所以无法启动，有想法且眼睛好的可以试一哈。
发布的话，我们可可以先把开发好的脚手架推到git 然后再执行，yarn publish 把它公开化。
学会了写?generator ，我们在试着写一个基于 NodeJS 的脚手架。我们先做一下准备工作。
先新建一个文件夹，初始化一个 package.json 文件，新建一个 cli.js 文件，然后在?package.json?中引入。
想在 Node?中发起命令行用户询问，需要用到一个?inquirer??？?，我们先进行一次安装。再安装一个?ejs?因为我们需要通过模板引擎去渲染对应的文件，最终结果如 图7.14 。
然后我们开始处理 cli.js 文件，这里要注意的是 cli 文件需要一个头文件， #!/usr/bin/env node? ；另，如果是 Linux 或者 mac 环境需要修改此文件的读写权限为 755 。
跟之前的基类中一样，这里我们调用 inquirer 中的 prompt 进行命令行询问?；袢∧０迓肪逗湍勘曷肪逗?，我们写一个copyToDest 函数把模板复制过去（因为模板里的文件夹层数不确定）
我们先整理一下我们复制过程的思路，我们先根据模板路径查找文件下的内容，内容分两类，一类是文件，我们要把它复制到对应的目标路径下?；褂幸焕嗍俏募校龅轿募?，我们就在目标文件对应路径下，创建一个文件夹，然后继续遍历这个文件夹。
好思路有了然后进行代码实现，通过 fs.readdir 去读取文件夹，然后根据返回的文件列表进行遍历，通过标记变量 isDirec 来判断地址所指向的是否是文件。是的话就创建一个文件夹，然后进行遍历。不是的话，就直接调用 ejs.renderFile 方法去获取文件结果，并写入对应路径内。
然后出来创建一个空文件夹，进入，执行命令，发现已经复制完成，好，ok，再见。
自动化构建系统
自动把源代码转换成生产代码就是自动化构建，解决兼容等问题。
一般我们会记住一些工具来完成这个过程，常用的比如 Grunt 和 Glup ，我们分别来介绍并使用这两个工具。
首先是 grunt ，在使用之前内，我们还是做一些准备工作，现在创建一个文件夹，在初始化一个 package.json 文件，安装一下 grunt ，最后我们在当前文件夹下创建一个 gruntfile.js 文件作为我们的入口。
这个文件我们用来编写一些需要自动执行的 grunt 任务。
Gulp 核心工作原理是把文件内容提取出来，进行规定的压缩，然后输出到指定位置。
需要进行转换的文件就是我们日?？⒅械谋嘈吹拇?，如模板 h5 要填写， sass less css js 的转换，图片，字体文件的压缩
