當(dāng)下的前端開發(fā)
● 不再是簡簡單單的使用HTML+CSS+JavaScript這些簡單的技術(shù)構(gòu)建網(wǎng)頁應(yīng)用程序了
● 我們要提高效率本讥，就必須減少重復(fù)的工作
● 使用less之類預(yù)處理的CSS coffeescript
● 提供開發(fā)階段的便利硼莽，開發(fā)階段更快捷
● 現(xiàn)在的開發(fā)行業(yè)優(yōu)質(zhì)的開發(fā)人員是不應(yīng)該將精力放在這些重復(fù)性質(zhì)的工作上
● Gulp就是一種可以自動化完成我們開發(fā)過程中大量的重復(fù)工作
..............1.預(yù)處理語言的編譯
..............2.js css html 壓縮混淆
..............3.圖片體積優(yōu)化
● 除gulp之外還有一些類似的自動化工具七芭，比如grunt
● what how why
Gulp簡介
-
當(dāng)下最流行的自動化工具
- 什么是自動化構(gòu)建工具片习？
- 自動完成一系列重復(fù)的操作
- less → css
- coffeescript → js
- css壓縮
- js混淆
- html壓縮
- img尺寸優(yōu)化
- 匪凉。枪眉。。再层。
-
鏈接：
gulp的包既包含工具贸铜，也包含一些編程的API
準備工作
- 安裝Node.js
- Node.js 給前端帶來了一場工業(yè)革命
- http://npm.taobao.org/
- 安裝完成過后可以通過命令行工具node -v
- 安裝nodejs過程會自動安裝npm(node packages manager)
- npm 3 以前的版本文件依賴是層級依賴
- npm 3 以后依賴關(guān)系改為平行依賴（windows上路徑過長問題）
- gulp本身是node的模塊
- 安裝 gulp 命令行工具
npm install -g gulp- -g 指的是在全局作用域中安裝
- 測試命令 gulp -v
- 初始化 gulp 項目
- 在本地安裝gulp包
- npm install gulp --save
- 創(chuàng)建任務(wù) - gulpfile.js
- gulpfile.js 就是gulp的主文件
基本使用
- 定義一個任務(wù)
- 復(fù)制單個文件
- 復(fù)制多個文件
-
globs匹配語法
- src/*
- src//
- src/*/
- src/*.jpg
- src/*.{jpg,png}
- 多個globs
- ['src/*.{jpg,png}','a/a.html']
- 排除某些文件
- !xxxxx
- 默認任務(wù)
- gulp 中的任務(wù)名有個特殊值 default
- 文件監(jiān)視自動執(zhí)行任務(wù)
常用插件
