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;
