Gulp 是前端開發(fā)過程中對(duì)代碼進(jìn)行構(gòu)建的工具金抡，是自動(dòng)化項(xiàng)目的構(gòu)建利器

它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化沪羔，而且在開發(fā)過程中很多重復(fù)任務(wù)能夠使用正確的

工具自動(dòng)完成臣镣，使用它谣膳，不僅可以很愉快的編寫代碼净神，而且能大大提升開發(fā)效率

下載安裝使用 gulp

首先安裝 nodejs何吝，通過 nodejs 的 npm 全局安裝和項(xiàng)目安裝 gulp 全局插件，

其次在項(xiàng)目里安裝所需要的 gulp 插件鹃唯，然后新建 gulp 的配 置文件

gulpfile.js 配置文件定制 gulp 任務(wù)爱榕，通過命令行運(yùn)行 gulp 任務(wù)即可。

安裝 nodeJS

? 全局安裝 gulp

? 項(xiàng)目中安裝 gulp 以及 gulp 插件

? 配置 gulpfile.js

? 運(yùn)行任務(wù)

安裝 nodeJS: https://nodejs.org/en/

下載安裝包坡慌，安裝黔酥。

命令行運(yùn)行 node –v 測(cè)試安裝

安裝 gulp 插件

>> npm install gulp –g // 全局安裝 gulp 插件

npm:node package manager,nodejs 包管理器，用于 node 插件管理（安裝洪橘、卸載跪者、管理依賴）npm 安裝插件：npm install[-g] [--save-dev]?：插件的名稱? -g：全局安裝，將會(huì)安裝在 C:\Users\Administrator\AppData\Roaming\npm熄求，并且寫入系統(tǒng)環(huán)境變量渣玲。非全局安裝，就會(huì)安裝在當(dāng)前目錄下 node_module/下弟晚，通過 require 引入? --save：將配置信息保存到 package.json 文件中【package.json 是 Node 項(xiàng)目配置文件】? -dev：保存配置到 devDependencies 節(jié)點(diǎn)忘衍，不指定就會(huì)保存 dependencies 節(jié)點(diǎn)node 插件比較大，不方便加入版本管理中卿城，于是將依賴插件的信息保存在 package.json 文件中枚钓，這個(gè)文件可以交給版本管理，其他人只需要獲取 package.json,就可以在自己本地通過 npm install命令根據(jù) package.json 中的依賴信息藻雪，自行下載引入插件秘噪。卸載插件：npm uninstall[-g] [--save-dev]刪除全部插件：npm install rimraf –g | rimraf node_modules更新插件：npm update[--save-dev]

更新全部插件：npm update [--save-dev]

查看 npm 幫助：npm help

查看已安裝列表：npm list

完成一個(gè)自動(dòng)對(duì)項(xiàng)目 js 打包的任務(wù)配置，整合文件到一個(gè)文件中

css/:樣式開發(fā)目錄

js/:腳本開發(fā)目錄

images/:開發(fā)中圖片目錄

disk/:編譯后的文件存放目錄勉耀，gulp 運(yùn)行后的所有文件會(huì)存放在這里

第二步：進(jìn)入項(xiàng)目文件夾指煎，初始化項(xiàng)目蹋偏，自動(dòng)生成 package.json 文件

打開命令行窗口，進(jìn)入目標(biāo)文件夾至壤，鍵入 npm init 初始化項(xiàng)目

name:(gulp_pro) 輸入項(xiàng)目名稱（不輸入就使用當(dāng)前目錄名稱）

version:(1.0.0)輸入版本號(hào)威始，默認(rèn)是括號(hào)中的版本號(hào)

description:項(xiàng)目描述信息

entry point:(index.js) 目標(biāo)文件

test command:測(cè)試命令，可以直接回車表示忽略

git repository:git 倉(cāng)庫(kù)像街，可以忽略

keyword:關(guān)鍵詞

author:作者

license:授權(quán)信息

第三步：安裝 gulp 插件黎棠，安裝文件合并 gulp-concat 插件

執(zhí)行名命令：npm install gulp --save-dev

未完成后再 package.json 中，就會(huì)出現(xiàn) devDenpendencies 配置項(xiàng)

執(zhí)行命令：npm install gulp-concat --save-dev

gulp-concat 合并文件插件

.src():要打包的所有文件列表

.pipe():管道符镰绎，使用.pipe()前面的命令作為參數(shù)執(zhí)行 pipe()后面指定的命令

.dest():打包提交的目標(biāo)文件夾

賴插件來進(jìn)行完成的脓斩。本節(jié)主要從兩方面入手進(jìn)行分析：

第一方面，了解 Gulp 的基本操作 API

第二方面畴栖，了解并掌握 gulp 的常見插件的操作

1) 常規(guī) API

gulp.src(globs [,options])

描述：src 方法是指定需要處理的源文件的路徑随静。

參數(shù)：

globs:需要處理的源文件的路徑，必填

src/a.js：指定具體文件

src/*.js：匹配所有文件吗讶，這里匹配 src 下所有的 js 文件

src/**/：匹配 0 個(gè)或者多個(gè)子文件夾燎猛，這里匹配 src 下所有文件夾

src{a,b}.js：匹配多個(gè)屬性，這里匹配 src 下 a.js 和 b.js

!src/a.js：排除文件照皆，這里匹配結(jié)果中排除掉 a.js 文件

options:類型重绷，可選，有 3 個(gè)屬性：buffer膜毁、read昭卓、base

options.buffer:boolean 類型，默認(rèn) true

options.read:boolean 類型爽茴，默認(rèn) true

options.base:string 類型葬凳，設(shè)置輸出路徑以某個(gè)路徑的某個(gè)組成部分為基礎(chǔ)向后拼接

gulp.dest(path [,options])

描述：dest 方法指定處理完成后文件的輸出路徑

參數(shù)：

path:指定文件輸出路徑，或者定義函數(shù)返回輸出路徑

options:有兩個(gè)屬性 cwd室奏、mode

options.cwd:string 類型火焰，默認(rèn) process.cwd()前腳本的工作目錄路徑

options.mode:string 類型，默認(rèn) 0777胧沫，指定被創(chuàng)建的文件夾的權(quán)限

gulp.task(name [,deps], fn)

描述：task 定義一個(gè)可執(zhí)行的 gulp 任務(wù)

參數(shù)：

name:string 類型昌简，任務(wù)名稱（不能包含空格）

deps:該任務(wù)依賴的任務(wù)，是一個(gè) string 類型的數(shù)組绒怨，執(zhí)行完數(shù)組中任務(wù)之后才會(huì)執(zhí)行當(dāng)前任務(wù)

fn:任務(wù)調(diào)用執(zhí)行完成后的回調(diào)函數(shù)

gulp.watch(glob [,opts], tasks)/watch(glob [,opts, cb])

描述：watch 方法用于監(jiān)聽文件變化纯赎，一旦變化就會(huì)執(zhí)行指定任務(wù)

參數(shù)：

glob:需要處理的源文件匹配的路徑，可以使一個(gè)字符串表示的路徑也可以使數(shù)組【必填】

tasks:需要執(zhí)行的任務(wù)的名稱數(shù)組【必填】

cb:每個(gè)文件變化執(zhí)行的回調(diào)函數(shù)【可選】

重命名插件——gulp-rename

1) 安裝插件:npm install gulp-rename --save-dev

2) gulpfile.js 中配置任務(wù)

3) 執(zhí)行任務(wù)

4) 結(jié)果查看

樣式壓縮插件——gulp-minify-css

1) 安裝插件:npm install gulp-minify-css

2) 編輯 src/css/main.css

3) gulpfile.js 中配置任務(wù)

4) 執(zhí)行任務(wù)：gulp minifycss

圖片壓縮插件——gulp-imagemin

1) 安裝插件:npm install gulp-imagemin

2) 在 images/目錄下存放圖片

3) gulpfile.js 中配置任務(wù)

4) 執(zhí)行任務(wù)：gulp imagemin

5) 結(jié)果查看

服務(wù)器插件——gulp-connect

1) 安裝插件：npm install gulp-connect --save-dev

2) gulpfile.js 中配置任務(wù)

3) 執(zhí)行任務(wù)：gulp server

4) 結(jié)果查看：打開瀏覽器南蹂，訪問 http://localhost:8080

瀏覽器自動(dòng)刷新——gulp-livereload

1) 安裝插件：npm install gulp-livereload --save-dev

2) 安裝插件：npm install gulp-watch --save-dev

3) gulpfile.js 中配置任務(wù)

gulp-watch:監(jiān)聽模塊犬金，根據(jù)監(jiān)聽的文件，執(zhí)行指定的任務(wù)列表

? gulp.task(“default”..:default 任務(wù)，gulp 中的默認(rèn)任務(wù)

GULP 在 在 WEBSTORM? 中的使用

1） 創(chuàng)建項(xiàng)目

2） 命令行添加 gulp 插件

3） 創(chuàng)建 package.json 文件【命令行創(chuàng)建】

編輯：牟文斌

官方網(wǎng)站：http://gulpjs.com 中文網(wǎng)站：http://www.gulpjs.com.cn

4） 添加插件——gulp,gulp-concat

5） 創(chuàng)建項(xiàng)目任務(wù)文件 gulpfile.js 并定義任務(wù)

6） 查看并執(zhí)行 gulp 任務(wù)

a) 在 gulpfile.js 文件上右鍵點(diǎn)擊

b) 彈出的菜單中選擇 show gulp tasks

c) 項(xiàng)目文件中就會(huì)出來一個(gè) gulp task 窗口晚顷，窗口中是 gulp 任務(wù)列表

d) 在任務(wù)列表上峰伙，右鍵點(diǎn)擊，可以選擇執(zhí)行任務(wù)