項(xiàng)目構(gòu)建

多個(gè)開發(fā)者共同開發(fā)一個(gè)項(xiàng)目，每位開發(fā)者負(fù)責(zé)不同的模塊，這就會(huì)造成一個(gè)完整的項(xiàng)目實(shí)際上是由許多的“代碼版段”組成的；

使用less、sass等一些預(yù)處理程序，降低CSS的維護(hù)成本，最終需要將這些預(yù)處理程序進(jìn)行解析；
合并css、javascript，壓縮html、css、

javascript、images可以加速網(wǎng)頁打開速度，提升性能；

這一系列的任務(wù)完全靠手動(dòng)完成幾乎是不可能的，借助構(gòu)建工具可以輕松實(shí)現(xiàn)。

所謂構(gòu)建工具是指通過簡單配置就可以幫我們實(shí)現(xiàn)合并、壓縮、校驗(yàn)、預(yù)處理等一系列任務(wù)的軟件工具。

常見的構(gòu)建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack

Gulp

Gulp是基于Nodejs開發(fā)的一個(gè)構(gòu)建工具，借助gulp插件可以實(shí)現(xiàn)不同的構(gòu)建任務(wù)，以其簡潔的配置和卓越的性能成為目前主流的構(gòu)建工具。
全局安裝 npm install -g gulp

Gulp基礎(chǔ)

• 1、本地安裝gulp
  進(jìn)入項(xiàng)目根目錄執(zhí)行npm install gulp --save-dev（添加--save-dev會(huì)在package.json記錄依賴關(guān)系）。
• 2、任務(wù)清單
  在項(xiàng)目根目錄中創(chuàng)建gulpfile.js（這是一個(gè)配置文件）

1.png

• 定義任務(wù)
  在gulpfile.js定義構(gòu)建任務(wù)，如壓縮、合并，Gulp自身并不執(zhí)行任何任務(wù)，是通過調(diào)用具體插件來完成的。
  以編譯LESS為例，安裝npm install gulp-less，如下圖定義任務(wù)

2

• 4、執(zhí)行任務(wù)
  輸入命令 gulp less

3

這樣我們的LESS文件便會(huì)編譯成CSS了。

Gulp工作原理

原理

Gulp是基于NodeJS的，通過require可以引入一個(gè)NodeJS的包（模塊），其作用類似于瀏覽器中的script標(biāo)簽引入資源，被引入的包存放在node_modules目錄下。

引入gulp包（模塊）后返回一個(gè)對象，習(xí)慣賦值給變量gulp，通過該對象提供的方法（API）完成任務(wù)的配置。

• 1、gulp.task() 定義各種不同的任務(wù)，如下圖有兩個(gè)參數(shù)

4

不同任務(wù)間存在依賴關(guān)系時(shí)，可以指定依賴，如下圖

5

• 2、gulp.src() 需要構(gòu)建資源的路徑，字符串或數(shù)組（可以正則方式書寫）

5

• 3、gulp.pipe() 管道，將需要構(gòu)建的資源“輸送”給插件。

6

• 4、gulp.dest() 構(gòu)建任務(wù)完成后資源存放的路徑（會(huì)自動(dòng)創(chuàng)建）

7

gulp.watch()

常用Gulp插件