#  fed-e-task-02-01

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

## Basic Information

- **Project Name**:  fed-e-task-02-01
- **Description**: 拉勾教育大前端高薪训练营 002 期作业仓库，阶段二，模块一
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  fed-e-task-02-01

## 介绍
拉勾教育大前端高薪训练营 002 期作业仓库，阶段二，模块一

## 简答题

### 1. 谈谈你对工程化的初步认识，结合之前遇到的问题，说出三个以上工程化能够解决问题或者带来的价值。
前端工程化，是对前端开发过程中的各项静态资源统一规划，将有利于开发维护的资源形态通过工程化构建，成为有利于生产环境发布的资源形态。因为，在开发环境下，重点是对代码和各项资源进行合理的规划便于代码维护，而生产环境与开发环境迥然不同，生产环境需要网站对用户友好、对资源的请求高效快速、尽量不浪费网络带宽、延迟时间短等特点，因此，需要对开发环境下的代码进行编译，以求达到适合生产环境部署的状态。
工程化可以解决很多前端开发的问题，诸如：
#### 对JavaScript脚本文件进行合理的合并与拆分，加快网站的加载与渲染。
为了在开发阶段便于维护代码，通常会将相关的JavaScript脚本文件组织在一起，不同功能的脚本文件放在不同的目录下。以前在浏览器端使用<script>标签来加载JavaScript脚本文件，现在的前端工程脚本文件特别多特别零碎，肯定无法再用<script>来加载，不然HTTP请求太多，网站加载缓慢，并且各个脚本之间还存在着依赖关系，如果不能正确地安排<script>标签的顺序，则会导致执行代码异常。因此，为了加快JavaScript脚本加载与依赖关系的处理，使用工程化的方式，将这些脚本文件进行打包合并，再对体积比较大的包进行合理的拆分，对公共依赖的库或框架进行拆分，从而加快网站的加载，解决脚本相互依赖的问题。
#### 使用CSS预处理器进行开发，赋予CSS代码程序化的能力
CSS代码是一种声明式或者说描述式的代码，并没有程序能力，因此，在CSS代码中存在着大量的冗余代码无法复用，而且标签的层级关系也不明朗，维护难度比较大。使用Sass、Less、Stylus、PostCSS等预处理器进行CSS代码的开发，可以有效解决上述问题。CSS预处理器是一种拥有程序能力的CSS语言，通常兼容CSS代码，使用预处理器开发，可以复用代码，简化维护难度，通过编译到CSS代码，即可部署到生产环境。
#### 对引用的静态资源路径的处理自动化
通过对静态资源路径的自动化处理，使得部署到不同环境下也能很快做到，而不需要手动一个个更改。
#### 使用node.js开启开发服务器，提高开发效率
不再需要安装服务器软件来测试开发的代码，只需要使用轻量的node.js开启服务器，即可测试代码。

### 2. 你认为脚手架除了为我们创建项目结构，还有什么更深的意义？
脚手架的作用不仅仅是创建项目结构，更重要的是自动化创建前端开发的环境和所需要的工具。
- 根据不同的项目最大程度复用资源、代码的组织架构、环境的搭建以及开发工具的集成，避免了人工操作的失误，提高了开发效率，尤其是对于大型项目而言，脚手架是提高效率、减少失误的有效方案。
- 统一各业务线的技术栈、制定规范，这样出现问题可以统一解决，升级和迭代都可以同步的进行

## 编程题的说明文档附在每个题目所在文件夹的README.md文件中，分别为
- 1. 见mxy-cli-demo/README.md
- 2. 见gulp-build/README.md
- 3. 见grunt-build/REAME.md