gulp——用自動化構(gòu)建工具增強你的工作流程！
## 當(dāng)下的前端開發(fā)
-不再是簡單使用html+css+js構(gòu)建網(wǎng)頁應(yīng)用
-需要提高效率，減少重復(fù)的工作量
-使用less等預(yù)處理css
-快速構(gòu)建能與后端通信的開發(fā)環(huán)境
-提供開發(fā)階段的便利，開發(fā)階段更快捷
+ 預(yù)處理語言的編輯
+ js css html 壓縮混淆
+ 圖片體積優(yōu)化
+ 通過反向代理快速搭建開發(fā)環(huán)境
-什么是gulp?
+ 前端開發(fā)過程中一種基于流的代碼構(gòu)建工具，是自動化項目的構(gòu)建利器；
+ 不僅能對網(wǎng)站資源進行優(yōu)化，而且在開發(fā)的過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成；
+ 可以愉快的編寫代碼，大大提高工作效率；
- what how why
## 準(zhǔn)備工作
- 安裝node.js
+ node.js為前端帶來了一場工業(yè)革命
+ 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信息）
- 創(chuàng)建任務(wù)
+ gulpfile.js
## 基本使用(demo1)
- gulp原生API
+ src? ? 尋找文件
+ dest? ? 輸出文件
+ task ? 定義一個任務(wù)
+ watc ? 監(jiān)聽文件
+ pipe? ? 流向下一步
- [globs匹配語法]
+ src/\*
+ src/\*.jpg
+ src/\*.{jpg,png}
+ 多個globs
*['src/\*.{jpg,png}','a/a.html']
## 常見gulp插件(demo2)
-安裝插件
npm install [插件名] --save;
-常用插件
+ 創(chuàng)建本地服務(wù)器? ? gulp-connect
+ 合并文件? ? ? ? ? gulp-concat
+ 重命名文件 gulp-rename
+ 壓縮js gulp-uglify
+ 壓縮css gulp-minify-css
+ 壓縮html gulp-minify-html
+ 壓縮圖片 gulp-imagemin
-插件使用
+ 確定某個需求
+ 根據(jù)需求尋找插件
+ 找到插件官方網(wǎng)址
+ 按官方提示完成基本使用
## gulp http服務(wù)(demo3)
- 在本地開發(fā)的時候經(jīng)常需要用http的方式去訪問我們的網(wǎng)頁
- 使用apche等方式會顯得比較麻煩
- node.js本身就能夠起一個本地服務(wù)器，借助gulp中的一些組件可以自動的幫我們起一個服務(wù)器
- 實現(xiàn)當(dāng)文件發(fā)生改變的時候自動的刷新頁面
## 結(jié)合http-proxy-middleware實現(xiàn)代理(demo4)
- 背景
+ 前后端分開部署時，需要單獨為前端啟動一個服務(wù)，使用gulp-connect的話，代理需要額外的插件來配置
- 為什么要代理
+ gulp-connect是靜態(tài)web的server（就是只能訪問靜態(tài)頁面）
+ 向另外一個或幾個服務(wù)器請求數(shù)據(jù)那么就需要代理，不然由于瀏覽器的限制是沒辦法跨域請求數(shù)據(jù)的。
+ 前后端一起部署,公司現(xiàn)在采取的方法
- 常用的實現(xiàn)跨域解決的方法
+ 采用一些本身就具備代理功能的服務(wù)器（例如Nginx）
- 安裝
+ npm install http-proxy-middleware --save-dev
+ context ('/rest')? ? ? ? ? ? ? ? ? ? ? ? ? 確定應(yīng)將哪些請求代理到目標(biāo)主機。
+ target? (http://questionpaper.jincin.com) 目標(biāo)主機地址
+ changeOrigin ? ? ? ? ? ? ? ? 啟動代理，選擇ture;
