一、首先要確定全局安裝了gulp， gulp的全局安裝命令

npm install gulp -g

二、在項目目錄下執行以下命令，創建package.json文件：

?npm init

三、依次執行下面的命令下載gulp依賴包和gulp-less以及gulp-autoprefixer工具：

? npm install gulp? -D

? npm install gulp-less ?gulp-autoprefixer? -D

四、在項目目錄中創建一個gulpfile的js文件，js代碼如下

//1:引入所需要的模塊

var gulp? =require("gulp");

var less? =require("gulp-less");

//css前綴兼容

var auto? =require("gulp-autoprefixer");

//2:創建編譯less任務，第一個參數為任務名稱

gulp.task("compileLess",function(){

?????? //找到項目中less文件夾中所有文件夾下的所有less文件

??????? gulp.src("./less/**/*.less")

?????????????? //進行預編譯處理,保持與引入的模塊一致

????????????? .pipe(less())

????????????? .pipe(auto({

???????????????????? grid:true,

??????????????????? browsers:['last 2 version']

?????? }))

????????????? //編譯后將less編譯成的css文件保存到項目目錄下的css文件夾中

???????????? .pipe(gulp.dest('./css'))

})

//到此，到項目目錄下，在終端輸入以下命令，就會在項目目錄下生成一個css文件夾，并且在css文件夾中生成一個與預編譯的less文件同名的css文件：

執行命令：

gulp compileLess

//拓展：在最后添加以下代碼，在終端直接輸入：gulp 也可以達到相同效果。這個適用于編譯多個不同類型的文件

//第一個參數為要預編譯的目標文件，第二個參數為數組，數組存儲各個任務名

gulp.task("watch:less",function(){

????????? gulp.watch('./less/**/*.less',['compileLess']);

})

//數組存儲各個任務名

gulp.task("default",["compileLess","watch:less"]);