一、构建工具的入门---------------------------------------------

1. 什么是自动化构建工具？
   把开发工作中琐碎的任务和反反复复要执行的任务，交给工具来自动完成，提高工作效率。
   比如： less编译、css压缩、es6的编译、js的压缩、图片的优化、文件的合并、垃圾文件的清理。

2. 常见的构建工具有哪些？
   gulp【推荐】
   grunt【了解】
   webpack【vue/angular/react的编译和打包都是它完成，不需自己配置，由CLI的脚手架工具自动配置】

3. 为什么要使用构建工具？
   降低工作时间成本、简化工作流程，提高工作效率。

二、gulp的快速入门---------------------------------------------

1. 官网
   英文 http://gulpjs.com/

2. 如何使用？
   2-1. 全局安装gulp脚手架工具【gulp命令】
   npm i -g gulp

2-2. 生成包的描述文件package.json
npm init -y

2-3. 安装开发依赖到本地项目中
npm i gulp --save-dev 或者 npm i gulp -D

2-4. 创建gulp配置文件
gulpfile.js 【文件名必须一致】

2-5. 引入gulp模块，并且配置gulp任务
//引入gulp模块
var gulp=require("gulp");

//配置任务
语法： gulp.task("任务名称",callback)

2-6. 执行任务
gulp 任务名称

说明： 如果任务名称是default，表示默认任务，执行时省略任务名称
gulp default ~~~~ gulp 或者gulp 任务名称

三、gulp的插件使用【举一反三】---------------------------------------------
3-1. 查找插件
https://www.npmjs.com/

gulp-uglify

3-2. 插件的命名规则
gulp-插件名称
比如：gulp-uglify 压缩js文件

3-3. 打开插件的官网
https://www.npmjs.com/package/gulp-uglify

3-4. 安装插件到开发依赖
npm i gulp-uglify -D

3-5. 引入插件模块
var uglify=require("gulp-uglify")

3-6. 使用插件，拷贝官网的代码配置任务
gulp.src('./src/js/test.js') //设置源文件的路径和文件名称
.pipe(uglify())//通过管道pipe执行插件的方法
.pipe(gulp.dest('dist/minJS')); //目标文件的路径和文件名称

3-7. 执行插件的任务
gulp