上一篇：阶段二-模块一学习笔记-工程化-脚手架
简答题
1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。
初步认识：所谓工程化是指遵循一定的标准和规范通过工具提高效率的一种手段，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。
解决的问题：
（1）重复的机械工作，比如部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器。
（2）想要使用 ES6+ 新特性，但是兼容有问题
（3）想要使用 Less/Sass/stylus 增强CSS的编程性，但是运行环境不能直接支持
（4）团队开发时，很难做到风格统一，保证质量的完成需求开发
（5）部分功能需要等待后端服务接口完成以后才可以进行开发
（6）无法使用模块化或组件化组织代码
2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？
脚手架可以创建项目基础结构，更重要的是给开发者提供一种约束和规范，例如：
相同的组织结构、相同的代码开发范式、
相同的模块依赖、相同的工具配置、
相同的基础代码
这样其他开发人员，拉取代码后，不至于出现问题，可以快速实现开发
编程题
一、概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具
脚手架实现的过程：
1、在使用脚手架的时候，会在命令行窗口工具内，显示一些脚手架自己预设好的问题
2、然后根据用户输入的信息，生成对应的项目基础结构
使用 NodeJS 完成一个自定义的小型脚手架工具
1、新建一个文件夹，名字qwd-demo-cli
2、用编辑器打开该文件夹，在编辑器命令行内输入npm init,初始化一个package.json文件
3、在package.json文件内，添加bin字段，指定cli文件的入口文件: "bin":"cli.js"
4、在qwd-demo-cli的根目录下创建一个cli.js文件，作为NODE CLI 应用入口文件
5、安装2个包 npm install --save inquirer // 命令行询问操作依赖包 npm install --save ejs // 添加模板引擎依赖包
6、在qwd-demo-cli的根目录下创建一个目录templates，在templates目录内，创建2个文件index.html 和index.txt
index.html的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= name%></title>
</head>
<body>
作者是：<%= author%>
当前版本号：<%= version%>
</body>
</html>
index.txt的内容：
标题：<%= name%>
作者是：<%= author%>
当前版本号：<%= version%>
7、在cli.js文件内实现小型脚手架cli
#!/usr/bin/env node
// Node CLI 的应用入口文件必须要有一个文件头,放在第一行 #!/usr/bin/env node
// 如果是linux macos 还粗腰修改次文件的读写权限为755，这样这个文件才可以作为cli文件的入口
// 具体就是通过chmod 755 cli.js 实现修改
// 使用 NodeJS 完成一个自定义的小型脚手架工具
const inquirer = require('inquirer')
const ejs = require('ejs')
const path = require('path')
const fs = require('fs')
// inquirer.prompt()返回的是Promise对象
inquirer.prompt([
{
type: 'input',
name: 'name',
default: '标题默认无',
message: 'project name:'
},
{
type: 'input',
name: 'author',
default: '作者默认无',
message: 'author name:'
},
{
type: 'input',
name: 'version',
default: '1.0.0',
message: 'version:'
}
]).then((result) => {
// result => { name: 'haha', author: 'qwd', version: '1.0.0' }
// 把用户输入的信息，通过ejs渲染到index.html\index.txt文件内
const temps = path.join(__dirname, 'templates')
const outPutDir = process.cwd()
// 读取模板目录，获取所有文件
fs.readdir(temps, (err, files) => {
if (err) throw err
// 遍历所有文件，把用户输入的信息，通过ejs渲染到文件内
files.forEach((item) => {
console.log(item)
ejs.renderFile(path.join(temps, item), result, (err, successData) => {
if (err) throw err
// 把通过ejs渲染后的文件内容，写入到目标目录下
fs.writeFile(path.join(outPutDir, item), successData, (err, success) => {
if (err) throw err
console.log(success)
})
})
})
})
})
8、把脚手架工具qwd-demo-cli 通过npm link 命令，连接到自己电脑的全局下
9、创建一个新的文件夹test，用于测试脚手架工具qwd-demo-cli
10、进入test文件夹，然后打开命令行工具，运行 qwd-demo-cli 命令， 查看结果
11、如上图所示，脚手架工具qwd-demo-cli 手写成功，(^o^)/
二、尝试使用 Gulp 完成项目的自动化构建
参考网址：www.gulpjs.com.cn/docs/gettin…
1、在自己电脑全局安装一个gulp-cli命令行工具：npm install --global gulp-cli
1、创建一个文件夹 qwd-gulp-demo
2、使用npm init 对项目进行初始化
3、安装一个gulp依赖，npm install --save-dev gulp
4、在 qwd-gulp-demo 根目录下创建一个名为 gulpfile.js 的文件，代码如下：
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
5、测试，在项目根目录下执行 gulp 命令：gulp，显示如下信息，基本配置就已经成功了
