前端工程化

Gulp Gulp 可以说是当下最流行的前端构建系统，特点是：高效、易用。其使用过程非常简单，大致过程如下： 基本使用 1. 初始化工作： 2. 编写 gulpfile.js 文件，添加构建任务： 3

Grunt Grunt 的基本使用 1. 初始化项目 2. 添加 grunt 模块 3. 添加 gruntfile.js 文件 项目根目录下添加 gruntfile.js 文件。 4. 编写 grun

常用的自动化构建工具 Grunt： Grunt 最早的前端构建系统。拥有完善的插件生态，其插件几乎可以自动化完成任何事情。 但是其工作过程基于临时文件去实现的，因此其构建速度相对较慢。 例如：使用 G

自动化构建 自动化：通过机器代替手工去完成一些工作。 构建：把一个东西转换成另一个东西。 开发行业当中的 自动化构建：把开发阶段中的源代码自动化的转化为生产环境中可运行的代码。这一转换的过程也被称为

脚手架的工作原理 初始化项目 指定 cli 应用入口文件 package.json 文件中添加 bin 字段，用于指定 cli 应用的入口文件; 编写 cli 入口文件（cli.js） 注 cli 入

Plop Plop 具体使用 安装 Plop 新建 plopfile.js 文件 创建模板文件 新建模板文件夹 —— plop-templates 文件夹； 新建模板文件（模板遵循 handlebar

Yeoman Yeoman 是一个可以帮助开发者快速开启一个新项目的工具集。 Yeoman 提出一个 Yeoman 工作流的概念，通过脚手架工具（yo），构建工具（grunt gulp 等）和包管理器

脚手架工具的概要； 前端工程化的发起者； 创建项目基础结构、提供项目规范和约定； 脚手架工具可以解决的问题； 如何学习脚手架； 常用的脚手架工具；

工程化 ≠ 某个工具 在现阶段有部分工具功能过于强大，如：webpack，这就导致了很多人误认为工程化就等于某个工具，只要使用了 webpack 就代表有了工程化。 其实不然，工具并不是工程化的核心。

工程化表现 一切重复的工作都应该被自动化 创建项目： 创建项目结构； 创建特定类型文件； 编码： 格式化代码； 校验代码风格； 编译/构建/打包； 预览/测试： Web Server/Mock； Li

工程化的概述 前端工程化 “前端工程化”之所以近些年被广泛关注和探讨，主要原因是现在的前端应用功能要求不断提高、业务逻辑日益复杂。 面临的问题 想要使用 ES6+ 新特性，但是兼容有问题； 想要使用