Yeoman基础使用

基本工具安装

在全局范围安装yo
安装对应的generator，不同的generator是用来生成不同项目的，例如generator-node
通过yo运行generator，例如yo node、yo webapp

Sub Generator

有时我们需要在一个已有的完整项目中，去生成一些文件，比如Readme或是eslint配置等等，我们就可以使用Sub Generator。

并且，不是每个generator都有Sub Generator，我们需要去官方文档下去查看。

使用总结

明确需求
找到合适的Generator
全局范围安装找到的Generator
通过Yo运行对应的Generator
通过命令行交互填写选项
生成你所需要的项目结构

自定义Generator

Generator本质上是一个NPM模块，Generator基本结构如下：

创建其它子生成器目录

具体步骤如下：

新建一个模块项目
安装yeoman-generator依赖
按项目结构要求创建文件夹

主要使用writing、prompting等API，使用this.fs.copy或this.fs.copyTplq去进行模板文件的生成。

Plop的基础使用

一款小而美的脚手架工具，使用Handlebars模板引擎进行模板编写。它用来创建项目中同类型文件是很方便的。

具体步骤如下：

将plop模块作为项目开发依赖安装
在项目根目录下创建一个plopfile.js文件
在plopfile.js文件中定义脚手架任务
使用Handlebars模板引擎，编写特定类型文件的模板
通过Plop提供的CLI运行脚手架任务，yarn plop [生成器名称]

脚手架的工作原理

新建一个node模块，在package.json中写上bin属性，指定脚本文件。

#!/usr/bin/env node Node CLI 应用入口文件必须要有这样的文件头。如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755，具体就是通过 chmod 755 cli.js 实现修改。

脚手架的工作过程：

通过命令行交互询问用户问题
根据用户回答的结果生成文件

在node中我们一般使用inquirer 模块进行命令行交互。

自动化构建

Npm Scripts

node脚本中有pre这个钩子，可以在某个脚本运行前执行。

{
  "name": "web-app-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "pretest": "yarn build",
    "test": "broswer-sync .",
  },
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "sass": "^1.32.8"
  }
}

安装npm-run-all、browser-sync模块，去看看官方文档怎么使用。

Grunt

搭建步骤：

安装grunt模块
创建gruntfile.js入口文件

gruntfile入口文件，用于定义一些需要Grunt自动执行的任务，它导出一个函数，此函数接受一个 grunt 的形参，内部提供一些创建任务时可以用到的API。

前端工程化实战：脚手架工具-笔记