gulp——用自动化构建工具增强你的工作流程！
## 当下的前端开发
-不再是简单使用html+css+js构建网页应用
-需要提高效率，减少重复的工作量
-使用less等预处理css
-快速构建能与后端通信的开发环境
-提供开发阶段的便利，开发阶段更快捷
+ 预处理语言的编辑
+ js css html 压缩混淆
+ 图片体积优化
+ 通过反向代理快速搭建开发环境
-什么是gulp?
+ 前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；
+ 不仅能对网站资源进行优化，而且在开发的过程中很多重复的任务能够使用正确的工具自动完成；
+ 可以愉快的编写代码，大大提高工作效率；
- what how why
## 准备工作
- 安装node.js
+ node.js为前端带来了一场工业革命
+ node -v 检查安装是否成功
+ 安装node.js过程中会自动安装npm(node packeages manager);
- 安装gulp http://www.gulpjs.com.cn/
+ npm install -g gulp
+ gulp -v 检测安装的gulp版本
- 初始化gulp
+ 初始化 npm init;
+ 在本地安装gulp包 npm install gulp --save （在配置文件中加入gulp信息）
- 创建任务
+ gulpfile.js
## 基本使用(demo1)
- gulp原生API
+ src 寻找文件
+ dest 输出文件
+ task 定义一个任务
+ watc 监听文件
+ pipe 流向下一步
- [globs匹配语法]
+ src/\*
+ src/\*.jpg
+ src/\*.{jpg,png}
+ 多个globs
*['src/\*.{jpg,png}','a/a.html']
## 常见gulp插件(demo2)
-安装插件
npm install [插件名] --save;
-常用插件
+ 创建本地服务器 gulp-connect
+ 合并文件 gulp-concat
+ 重命名文件 gulp-rename
+ 压缩js gulp-uglify
+ 压缩css gulp-minify-css
+ 压缩html gulp-minify-html
+ 压缩图片 gulp-imagemin
-插件使用
+ 确定某个需求
+ 根据需求寻找插件
+ 找到插件官方网址
+ 按官方提示完成基本使用
## gulp http服务(demo3)
- 在本地开发的时候经常需要用http的方式去访问我们的网页
- 使用apche等方式会显得比较麻烦
- node.js本身就能够起一个本地服务器，借助gulp中的一些组件可以自动的帮我们起一个服务器
- 实现当文件发生改变的时候自动的刷新页面
## 结合http-proxy-middleware实现代理(demo4)
- 背景
+ 前后端分开部署时，需要单独为前端启动一个服务，使用gulp-connect的话，代理需要额外的插件来配置
- 为什么要代理
+ gulp-connect是静态web的server（就是只能访问静态页面）
+ 向另外一个或几个服务器请求数据那么就需要代理，不然由于浏览器的限制是没办法跨域请求数据的。
+ 前后端一起部署,公司现在采取的方法
- 常用的实现跨域解决的方法
+ 采用一些本身就具备代理功能的服务器（例如Nginx）
- 安装
+ npm install http-proxy-middleware --save-dev
+ context ('/rest') 确定应将哪些请求代理到目标主机。
+ target (http://questionpaper.jincin.com) 目标主机地址
+ changeOrigin 启动代理，选择ture;
