1.關(guān)于gulp

gulp實質(zhì)上就是基于流的代碼自動化構(gòu)建工具，簡單來說就是代碼構(gòu)建工具，那么我們?yōu)槭裁匆褂么a構(gòu)建工具呢？或者說代碼構(gòu)建工具的作用是什么？

• 網(wǎng)站性能優(yōu)化。如今任何一個網(wǎng)站，無論后端語言是Java,C#還是PHP，前端一定會使用到j(luò)s、css、html，這是毫無疑問的。一個網(wǎng)站的js,css文件越多越耗性能，一個網(wǎng)站js，css文件越大，越耗費性能。比如css和js文件我們在編寫的時候為了客觀性，會有一定排版，產(chǎn)生大量的空格。還比如我們可能為把每個頁面新建一個獨立的js,css文件，這樣打開頁面的時候會加載很多樣式文件。基于此，代碼構(gòu)建工具可以幫我們自動壓縮，合并css,js文件，使文件容量更小，數(shù)量更少。
• 工作效率提升。CSS3的許多新特性給我們帶來了方便，但是對于不同的瀏覽器，Vendor前綴前綴不同，手動添加又太繁瑣，而代碼構(gòu)建工具能夠幫助我們自動補充各種瀏覽器的vendor前綴。另外代碼構(gòu)建工具還能幫助我們檢測css,js的bug(比如少了分號，屬性名稱不對)，以及自動化構(gòu)建單元測試。

正式如此多的優(yōu)點，越來越多的開發(fā)團隊選擇使用代買構(gòu)建工具，gulp就是一種優(yōu)秀的代碼構(gòu)建工具。

2.node.js的安裝。

gulp是基于Nodejs的自動任務(wù)運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。所以我們在使用gulp之前需要安裝node.js。此處是在windows上利用nodist安裝多版本的node.js。

• 點擊下載nodist安裝包，安裝好軟件。注：如果電腦之前安裝了Node，安裝Nodist之前需要卸載掉Node；
• 更換淘寶鏡像，加速。進入Nodist安裝目錄，打開cli.js，將distUrl、iojsDistUrl更換成如下即可：

var distUrl = 'https://npm.taobao.org/mirrors/node';
var iojsDistUrl = 'https://npm.taobao.org/mirrors/iojs';

• npm加速。打開命令行窗口，輸入命令：

npm config set registry https://registry.npm.taobao.org 

• 常用命令：

nodist //查看當(dāng)前安裝了的node版本列表
nodist 4.4.6 //設(shè)置全局node的版本，如果該版本不存在，會先下載node
nodist + 4.4.6 //檢查該版本有沒有安裝，如果沒有，會進行下載
nodist -4.4.6 //移除某個版本

3.gulp安裝教程

一般我們會使用npm作為node.js的資源管理器，用于node插件管理（包括安裝、卸載、管理依賴等）；但是,npm的服務(wù)器放在國外，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，此時我們的馬云爸爸就創(chuàng)建了一個國內(nèi)的資源中心，同步頻率目前為每十分鐘同步一次，以保證盡量與官方服務(wù)同步。使用如下命令，安裝cnpm:

npm install cnpm -g --registry=https://registry.npm.taobao.org；

言歸正傳，開始全局安裝gulp

cnpm install gulp -g；

測試是否安裝成功，如果執(zhí)行以下命令，出現(xiàn)版本信息就說明gupl安裝成功。

gulp -v

4.簡單使用

新建一個package.json文件。注意：package.json是基于nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；

//創(chuàng)建package.json文件。
cnpm init

test.png

本地安裝gulp插件

cnpm install gulp-less --save-dev

image.png

為了能正常使用，我們還得本地安裝。你可能會發(fā)現(xiàn)，我們?nèi)职惭b了gulp，項目也安裝了gulp，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)，本地安裝gulp則是為了調(diào)用gulp插件的功能。

gulp：cnpm install gulp --save-dev；

在你的項目根目錄下面創(chuàng)建gulpfile.js文件，文件內(nèi)容如下：

//導(dǎo)入工具包 require('node_modules里對應(yīng)模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');
 
//定義一個testLess任務(wù)（自定義任務(wù)名稱）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //該任務(wù)針對的文件
        .pipe(less()) //該任務(wù)調(diào)用的模塊
        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css
});
 
gulp.task('default',['testLess']); //定義默認任務(wù) 
 
//gulp.task(name[, deps], fn) 定義任務(wù)  name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑

運行g(shù)ulp任務(wù)

• 說明：命令提示符執(zhí)行g(shù)ulp 任務(wù)名稱；
• 編譯less：命令提示符執(zhí)行g(shù)ulp testLess；
• 當(dāng)執(zhí)行g(shù)ulp default或gulp將會調(diào)用default任務(wù)里的所有任務(wù)[‘testLess’,’elseTask’]

image.png