开发脚手架及封装自动化构建工作流

一、工程化的定义和主要解决的问题

1、工程化的定义和主要解决的问题

前端工程化：全副武装：通过工程化提升“战斗力”

面临的问题

• 想使用ES6+ 新特性，但是兼容有问题
• 想要用 Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持
• 想要用模块化的方式提高项目的可维护性，但运行环境不能直接支持
• 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器
• 多人协作开发，无法硬性统一大家的代码风格，从仓库pull回来的代码质量无法保证
• 部分功能开发时需要等待后端服务接口提前完成

主要解决的问题

• 传统语言或语法的弊端
• 无法使用模块化/组件化
• 重复的机械式工作
• 代码风格统一、质量保证
• 依赖后端服务接口支持
• 整体依赖后端项目

2、一个项目过程中的工程化的表现

工程化表现
一切以提高效率、降低成本、质量保证为目的的手段都属于“工程化”
一切重复的工作都应该被自动化

创建项目：

• 创建项目结构
• 创建特定类型文件

编码：

• 格式化代码
• 校验代码风格
• 编译/构建/打包

预览/测试：

• Web Server/Mock
• Live Reloading/HRM
• Source Map

提交：

• Git Hooks
• Lint-staged
• 持续集成

部署：

• CI/CD
• 自动发布

3、 工程化不等于工具

4、 工程与Node.js

脚手架工具

1、常用的脚手架工具

• React项目 --》create-react-app
• Vue.js 项目 --》 vue-cli
• Angular 项目 --》 angular-cli
  这些脚手架工具都是根据信息创建对应的项目基础结构
  通用型脚手架工具： Yeoman
  在项目开发过程创建一些特定类型的文件（例如创建一个组件/模块所需要的文件）：Plop

2、 Yeoman 基础使用

一、检查有没有按照 node.js
二、检查有没有安装 npm
三、检查有没有安装 yarn,因为下面的安装用 yarn
四、开始 安装 Yeoman,全局安装：yarn global add yo
Yeoman 要搭配特定的 generator 才能用：比如 generator-node：yarn global add generator-node
这两个本人用 yarn 安装没有成功，改成用 npm install -g yo 和 npm install -g generator-node 安装才成功

Sub Generator

Yeoman使用步骤总结

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

自定义Generator

基于 Yeoman搭建自己的脚手架

创建 Generator 模块

Generator本质上就是一个 NPM 模块

yeoman 的generator的名称必须是 generator-

根据模板创建文件

相对于手动创建每一个文件，模板的方式大大提高了效率

接收用户输入数据

Vue Generator 案例

发布 Generator

先上传到 git 然后发布

Plop 简介

一个小而美的脚手架工具

Plop 的基本使用

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

脚手架的工作原理

自动化构建

1、自动化构建简介

一切重复工作本应自动化
自动化构建
自动化构建工作流
作用：尽可能脱离运行环节兼容带来的问题，在开发阶段使用提高效率的语法、规范和标准。最典型的应用场景，网页应用时：

• 使用 ECMAScript Next （ECMAScript 最新标准）提高编码效率和质量
• Sass 增强 CSS的可编程性
• 模板引擎 抽象页面当中重复的HTML
  这些在浏览器当中大部分是不支持的，这个时候就要借助 – 自动化构建工具 构建转换哪些不被支持的 “特性”
  

2、自动化构建初体验

NPM Scripts 实现自动化构建工作流的最简方式
build 自动监听 sass文件的变化，编译sass
browser-sync启动一个 web服务，当文件发生变化过后去刷新浏览器

3、常用的自动化构建工具

Grunt：算是最早的前端构建系统，插件生态非常完善，用官方的话来说Grunt 它的插件几乎能帮你完成任何你想要做的事情，但是由于它的工作过程是基于临时文件实现，所以开发速度非常慢，如使用它开发 sass文件，会先它去做编译操作，再去添加自由属性的前缀，最后再去压缩代码，对非常大的项目速度非常慢
Gulp：很好的解决了 Grunt 速度非常慢的问题，它基于内存实现，对文件处理环节都是在内存完成的，另外它默认支持同时执行多个任务，所以效率大大提高，而且它相对于 Grunt 更加直观易懂，它的插件生态同样非常完善
FIS：百度前端团队推出的，更像捆绑套餐

4、Grunt 的基本使用

5、Grunt 标记任务失败

6、Grunt 的配置方法

7、Grunt 多目标任务

8、Grunt 插件的使用

使用 grunt 插件的步骤

1. 找到该插件并安装到 npm 模块当中
2. 在 gruntfile.js 文件 通过 grunt.loadNpmTasks(‘xxx’)方法把该插件提高的一些任务加载进来
3. 在 grunt.initConfig添加一些配置选项

9. Grunt 常用插件及总结

• 处理sass文件，安装 npm install grunt-sass sass --dev
  

• 减少load的使用， 安装 npm install load-grunt-tasks --dev

• 处理es6语法 安装 >npm install grunt-babel @babel/core @babel/preset-env --dev

• 文件修改后自动编译，安装 npm install grunt-contrib-watch --dev
  

10、Gulp 的基本使用

安装 gulp npm install gulp --dev 或者 yarn add gulp --dev

11、 Gulp 的组合任务

const {
    series, parallel } = require('gulp')

const task1 = done => {
   
	setTimeout(() => {
   
		console.log('task1 working~')
		done()
	}, 1000)
}

const task2 = done => {
   
	setTimeout(() => {
   
		console.log('task2 working~')
		done()
	}, 1000)
}

const task3 = done => {
   
	setTimeout(() => {
   
		console.log('task3 working~')
		done()
	}, 1000)
}

在执行部署任务中，先执行编译任务，这时需要 series执行串行任务

exports.foo = series(task1, task2, task3)

编译css, js这种互不干扰的任务可以并行执行，用parallel，提高执行效率

exports.bar = parallel(task1, task2, task3)

12、Gulp 异步任务的三种方式

exports.callback = done => {
   
	console.log('callback task~')
	done()
}

第一种方式：想在执行过程当中报出一个错误阻止往下执行，通过给回调函数的第一个参数执行错误对象加上 new Error(‘failed~~~~~~~’)

exports.callback_error = done => {
   
	console.log('callback task~')
	done(new Error('task failed!'))
}

第二种方式： promise 相对于 回调函数来说，避免了代码中回调传递过深的问题

exports.promise = () => {
   
	console.log('promise task')
	return Promise.resolve()
}

exports.promise_error = () => {
   
	console.log('promise task')
	return Promise.reject(new Error('task failed~')