本文節(jié)選自 gulp詳細(xì)入門教程 作者：Ooo_My_God
gulp是前端開發(fā)過程中對代碼進行構(gòu)建的工具洋丐，是自動化項目的構(gòu)建利器；她不僅能對網(wǎng)站資源進行優(yōu)化蒿讥，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成蝶念；使用她，我們不僅可以很愉快的編寫代碼芋绸，而且大大提高我們的工作效率媒殉。
gulp是基于Nodejs的自動任務(wù)運行器， 她能自動化地完成javascript摔敛、coffee廷蓉、sass、less马昙、html桃犬、image、css 等文件的的測試行楞、檢查攒暇、合并、壓縮子房、格式化形用、瀏覽器自動刷新、部署文件生成证杭，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟田度。在實現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想解愤，前一級的輸出镇饺，直接變成后一級的輸入，使得在操作上非常簡單送讲。通過本文奸笤，我們將學(xué)習(xí)如何使用Gulp來改變開發(fā)流程，從而使開發(fā)更加快速高效李茫。
本示例以gulp-less為例（將less編譯成css的gulp插件）展示gulp的常規(guī)用法揭保，只要我們學(xué)會使用一個gulp插件后，其他插件就差看看其幫助文檔了魄宏。
gulp常用地址：
gulp官方網(wǎng)址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424
1. 先下載node.js和npm秸侣，配置好package.json文件
詳見博文《npm入門指南》
2. 全局安裝gulp
全局安裝gulp目的是為了在終端或命令行中執(zhí)行g(shù)ulp任務(wù)；
安裝：命令提示符執(zhí)行cnpm install gulp -g；
命令提示符執(zhí)行gulp -v味榛，出現(xiàn)版本號即為正確安裝椭坚。
3. 本地安裝gulp插件。
安裝：定位目錄命令后提示符執(zhí)行cnpm install --save-dev搏色；
本示例以gulp-less為例（編譯less文件）善茎，命令提示符執(zhí)行cnpm install gulp-less --save-dev；
將會安裝在node_modules的gulp-less目錄下频轿，該目錄下有一個gulp-less的使用幫助文檔README.md垂涯；
為了能正常使用，我們還得本地安裝gulp：cnpm install gulp --save-dev航邢；
PS：細(xì)心的你可能會發(fā)現(xiàn)耕赘，我們?nèi)职惭b了gulp，項目也安裝了gulp膳殷，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)操骡，本地安裝gulp則是為了調(diào)用gulp插件的功能。
4. 新建gulpfile.js文件（重要）
說明：gulpfile.js是gulp項目的配置文件赚窃，是位于項目根目錄的普通js文件（其實將gulpfile.js放入其他文件夾下亦可）册招。
它大概是這樣一個js文件（更多插件配置請查看這里）：
//導(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', 'elseTask']);
//定義默認(rèn)任務(wù) elseTask為其他任務(wù)，該示例沒有定義elseTask任務(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]) 處理完后文件生成路徑
該示例文件請下載查看
5. 運行g(shù)ulp
說明：命令提示符執(zhí)行g(shù)ulp 任務(wù)名稱勒极；
編譯less：命令提示符執(zhí)行g(shù)ulp testLess (可在 package.json 中 scripts里指定一個命令快捷執(zhí)行)
當(dāng)執(zhí)行g(shù)ulp default或gulp將會調(diào)用default任務(wù)里的所有任務(wù)[‘testLess’,’elseTask’]是掰。
