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