gulp

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;