# fed-e-task-02-01

**Repository Path**: fed-e-task/fed-e-task-02-01

## Basic Information

- **Project Name**: fed-e-task-02-01
- **Description**: 大前端训练营第二部分模块一（工程化基础知识及Gulp构建项目）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-01
- **Last Updated**: 2021-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 揭智勇 ｜ Part 2 | 模块一



## 简答题

### 1、谈谈你对工程化的初步认识，结合你之前遇到的问题说出三个以上工程化能够解决问题或者带来的价值。

> - 工程化是通过制定一系列的标准和规范，使用工具从而提高效率，降低成本及保证代码质量的一种手段。
> - 前端工程化的表现在项目的各个阶段，从项目的创建，编码，预览/测试，提交，部署，在项目的这几个阶段都能通过工程化去解决一如，比如在创建阶段可以使用脚手架快速创建，在编码阶段，借助工程化工具进行自动化格式化代码，校验代码风格，编译等。
> - 前端工程化的技术低层是NodeJs技术，可以说没有NodeJs，前端工程化也没有这么繁荣。
> - 工程化不是工具，工程化是一种对项目的规划，工具只是为了落地工程化的手段。

```javascript
工程化可以解决传统语言或语法的的弊端，比如可以使用ES6+新特性，对css的可编程性增强语言scss等
工程化可以使用模块化/组件化进行开发，提高项目的可维护性。
工程化可以使用代码校验工具同一代码风格，保证代码质量。
工程化可以实时进行开发预览及测试
工程化可以通过mock服务解决前端依赖后端接口的问题
工程化可以解决重复性的机械工作，比如打包，上传到服务器中这些固定重复的工作
工程化可以让前端独立使用CI/CD，解决了与后端的耦合。
```


### 2、你认为脚手架除了为我们创建项目结构，更有什么更深的意义？

> 脚手架可以为我们快速创建项目基础目录，还提供项目的规范和约定，这些规范和约定包括相同的组织结构，相同的开发范式，相同的模块依赖，相同的配置等等；通过这些规范和约定，能够快速创建同一类型的项目。

## 编程题

### 1、 概述脚手架实现的过程，并使用NodeJs完成一个自定义的小型脚手架工具。

 > 脚手架其实也是一个node的cli应用，然后通过命令交互询问用户问题，根据用户的回答结果生成对应的模板。

 - 初始化npm

```javascript
 npm init
```

 - 在package中执行bin字段

 ```javascript
 {
 	"name": "node-cli",
 	"bin": "bin/index.js"
 }
 ```

 - 在bin/index.js文件中添加文件头及代码

 ```javascript
 #! /usr/bin/env node
 // 填写cli代码
 console.log('开始cli')
 ```

 - 使用inquirer模块询问用户问题，然后在根据问题的回答及内置的模板生成目标文件

 ```javascript
 const inquirer = require('inquirer')
 inquire.prompt([
 {
 	type: 'input',
 	name: 'name',
 	message: 'Project name'
 }
 ]).then(answers => {
 	// 根据answers及内置的模板生成目标文件
 	console.log(answers)
 })
 ```

 - 使用cli

 ```javascript
 npm link
 ```

基于NodeJs创建vue-cli见 code/vue-generator-cli

### 2、 尝试使用Gulp完成项目的自动化构建。

```javascript
// 见code/gulp-web
```



### 3、 使用Grunt完成项目的自动化构建

```javascript
// 见code/grunt-web
```