如何使用GULP?

1.背景介紹

gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具打瘪，是自動化項目的構(gòu)建利器；它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化揍障，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成啤月；使用它，我們不僅可以很愉快的編寫代碼嫉髓，而且大大提高我們的工作效率观腊。

gulp是基于Nodejs的自動任務(wù)運行器，它能自動化地完成javascript/coffee/sass/less/html/image/css等文件的的測試算行、檢查梧油、合并、壓縮州邢、格式化儡陨、瀏覽器自動刷新、部署文件生成量淌，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟骗村。在實現(xiàn)上，它借鑒了Unix操作系統(tǒng)的管道（pipe）思想呀枢，前一級的輸出胚股，直接變成后一級的輸入，使得在操作上非常簡單裙秋。

2.知識剖析

1琅拌、如何安裝gulp：

首先安裝nodejs，通過nodejs的npm全局安裝和項目安裝gulp残吩，其次在項目里安裝所需要的gulp插件财忽，然后新建gulp的配置文件gulpfile.js并寫好配置信息（定義gulp任務(wù)），最后通過命令提示符運行g(shù)ulp任務(wù)即可泣侮。

2即彪、步驟如下：

安裝nodejs ->全局安裝gulp ->項目安裝gulp以及gulp插件->配置gulpfile.js ->運行任務(wù)

3、gulp在使用過程中常用命令:

node -v查看安裝的nodejs版本，出現(xiàn)版本號隶校，說明剛剛已正確安裝nodejs漏益。

npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器深胳。

cd定位到目錄绰疤，用法：cd +路徑；

dir列出文件列表舞终；

cls清空命令提示符窗口內(nèi)容轻庆。

4、npm

npm（node package manager）nodejs的包管理器敛劝，用于node插件管理（包括安裝余爆、卸載、更新夸盟、管理依賴等）

4.2蛾方、使用npm安裝插件：命令提示符執(zhí)行npm install

[-g] [--save-dev]；

4.2.1上陕、：node插件名稱桩砰。例：npm install gulp-less--save-dev

4.2.2、-g：全局安裝释簿。將會安裝在C:\Users\Administrator\AppData\Roaming\npm亚隅，并且寫入系統(tǒng)環(huán)境變量；非全局安裝：將會安裝在當(dāng)前定位目錄辕万；全局安裝可以通過命令行在任何地方調(diào)用它枢步，本地安裝將安裝在定位目錄的node_modules文件夾下沉删，通過require()調(diào)用渐尿；

4.2.3、--save：將保存配置信息至package.json（package.json是nodejs項目配置文件）矾瑰；

4.2.4砖茸、-dev：保存至package.json的devDependencies節(jié)點，不指定-dev將保存至dependencies節(jié)點殴穴；一般保存在dependencies的像這些express/ejs/body-parser等等凉夯。

4.2.5、為什么要保存至package.json采幌？因為node插件包相對來說非常龐大劲够，所以不加入版本管理，將配置信息寫入package.json并將其加入版本管理休傍，其他開發(fā)者對應(yīng)下載即可（命令提示符執(zhí)行npm install征绎，則會根據(jù)package.json下載所有需要的包，npm install --production只下載dependencies節(jié)點的包）磨取。

4.3人柿、使用npm卸載插件：npm uninstall

[-g] [--save-dev] PS：不要直接刪除本地插件包

4.3.1柴墩、刪除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat……???太麻煩

4.3.2、借助rimraf：npm install rimraf -g用法：rimraf node_modules

4.4凫岖、使用npm更新插件：npm update [-g] [--save-dev]

4.4.1江咳、更新全部插件：npm update [--save-dev]

4.5、查看npm幫助：npm help

4.6哥放、當(dāng)前目錄已安裝插件：npm list

5歼指、選裝cnpm

5.1、說明：因為npm安裝插件是從國外服務(wù)器下載甥雕，受網(wǎng)絡(luò)影響大东臀，可能出現(xiàn)異常，如果npm的服務(wù)器在中國就好了犀农，“這是一個完整npmjs.org鏡像惰赋，你可以用此代替官方版本(只讀)，同步頻率目前為10分鐘一次以保證盡量與官方服務(wù)同步呵哨×薇簦”；

5.2孟害、官方網(wǎng)址：http://npm.taobao.org拒炎；

5.3、安裝：命令提示符執(zhí)行npm install cnpm -g

--registry=https://registry.npm.taobao.org挨务；注意：安裝完后最好查看其版本號cnpm -v或關(guān)閉命令提示符重新打開击你，安裝完直接使用有可能會出現(xiàn)錯誤；

注：cnpm跟npm用法完全一致谎柄，只是在執(zhí)行命令時將npm改為cnpm（以下操作將以cnpm代替npm）丁侄。