一巴粪、首先要確定全局安裝了gulp， gulp的全局安裝命令
npm install gulp -g
二、在項(xiàng)目目錄下執(zhí)行以下命令灌砖，創(chuàng)建package.json文件：
?npm init
三望侈、依次執(zhí)行下面的命令下載gulp依賴包和gulp-less以及gulp-autoprefixer工具：
? npm install gulp? -D
? npm install gulp-less ?gulp-autoprefixer? -D
四印蔬、在項(xiàng)目目錄中創(chuàng)建一個(gè)gulpfile的js文件，js代碼如下
//1:引入所需要的模塊
var gulp? =require("gulp");
var less? =require("gulp-less");
//css前綴兼容
var auto? =require("gulp-autoprefixer");
//2:創(chuàng)建編譯less任務(wù)脱衙，第一個(gè)參數(shù)為任務(wù)名稱
gulp.task("compileLess",function(){
?????? //找到項(xiàng)目中l(wèi)ess文件夾中所有文件夾下的所有l(wèi)ess文件
??????? gulp.src("./less/**/*.less")
?????????????? //進(jìn)行預(yù)編譯處理,保持與引入的模塊一致
????????????? .pipe(less())
????????????? .pipe(auto({
???????????????????? grid:true,
??????????????????? browsers:['last 2 version']
?????? }))
????????????? //編譯后將less編譯成的css文件保存到項(xiàng)目目錄下的css文件夾中
???????????? .pipe(gulp.dest('./css'))
})
//到此侥猬，到項(xiàng)目目錄下，在終端輸入以下命令捐韩，就會(huì)在項(xiàng)目目錄下生成一個(gè)css文件夾退唠，并且在css文件夾中生成一個(gè)與預(yù)編譯的less文件同名的css文件：
執(zhí)行命令：
gulp compileLess
//拓展：在最后添加以下代碼，在終端直接輸入：gulp 也可以達(dá)到相同效果奥帘。這個(gè)適用于編譯多個(gè)不同類型的文件
//第一個(gè)參數(shù)為要預(yù)編譯的目標(biāo)文件铜邮，第二個(gè)參數(shù)為數(shù)組，數(shù)組存儲(chǔ)各個(gè)任務(wù)名
gulp.task("watch:less",function(){
????????? gulp.watch('./less/**/*.less',['compileLess']);
})
//數(shù)組存儲(chǔ)各個(gè)任務(wù)名
gulp.task("default",["compileLess","watch:less"]);
