# fed-e-task-01-03

**Repository Path**: hanfengmi/fed-e-task-01-03

## Basic Information

- **Project Name**: fed-e-task-01-03
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 三周作业

### 1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。
> 工程化：遵循一定的标准和规范，通过工具去提高效率，降低开发成本的一种手段。     
> 解决了ES6新特性的兼容，less\scss预处理的编写兼容处理，项目模块化开发，开完完毕后压缩部署，模拟后端接口数据


### 2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？
> 自动创建依赖文件，提供开发者约定和规范（组织结构、开发范式、模块依赖、工具配置、基础代码），快速搭建特定类型项目骨架。

编程题
1、概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具
> 见code/generator-hzk-react

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

**code/pages-boilerplate-gulp**
1. 导入gulp常用的函数
```const { src, dest, parallel, series, watch } = require('gulp');```

2. 下载常用npm包
```
"@babel/core": "^7.11.6", //解析es6
"@babel/preset-env": "^7.11.5", //解析es6
"browser-sync": "^2.26.12", // 本地服务器
"del": "^5.1.0", // 清空文件家
"gulp": "^4.0.2", // 
"gulp-babel": "^8.0.0", //解析es6
"gulp-clean-css": "^4.3.0", //压缩css
"gulp-htmlmin": "^5.0.1", //压缩html
"gulp-if": "^3.0.0", // 判断文件类型
"gulp-imagemin": "^7.1.0", // 压缩图片
"gulp-load-plugins": "^2.0.4", // 快速使用gulp包
"gulp-sass": "^4.1.0", // sass编译
"gulp-swig": "^0.9.1", // html模板解析
"gulp-uglify": "^3.0.2", // 压缩js
"gulp-useref": "^4.0.1" // 合并文件
```

3. 分块配置
> html,css,js,image,font等资源使用相关模块包配置   
> 启动本地服务器，监听文件变化，重新打包预览   
> useref 合并html中引用文件，并分类进行压缩优化   
> 根据文件需求顺序整合打包方法
> 暴露公共方法

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

**code/pages-boilerplate-grunt**
> grunt-contrib-clean 清除文件    
> scss 编译css预处理文件    
> babel 编译es6语法
> watch 监听文件变化