gulp-less配置

1.首先默認你已安裝好node,gulp，並安裝了connect插件。在此基礎上，我們來安裝less
2.進入工程目錄，命令提示符執行

npm install gulp-less --save-dev less

3.安裝gulp-plumber

npm install gulp-plumber

如果不安裝此插件，我們在開啓服務器，less，css監聽時，每次less編譯出現錯誤，命令行會報錯並停止監聽，需要我們手動停止之後再重新開啓監聽，十分麻煩。安裝此插件並完善配置信息，可避免這一問題。

4.配置gulpfile.js

let gulp = require("gulp");
let connect = require("gulp-connect");
let less = require("gulp-less");
let plumber = require("gulp-plumber");
gulp.task("hello",()=>{
	console.log("hello this is my first gulp-task");
})

//gulp.task()	創建gulp指令
//gulp.src()	查找路徑
//gulp.pipe()	用來做連綴
//gulp.dest()	轉存
//gulp.watch()	監視


gulp.task("index",()=>{
	return gulp.src(["local/**/*","!local/world.txt"]).pipe(gulp.dest("dist")).pipe(connect.reload());
})

gulp.task("watch",()=>{
	gulp.watch("local/index.html",["index"])
})

gulp.task("Lesswatch",()=>{
	gulp.watch("local/less/*.less",["testLess"])
})
//connect插件用來搭建本地服務器
gulp.task("server",()=>{
	connect.server({
		root:"dist",
		port:8888,
		livereload:true
	})
})

gulp.task("default",["server","watch","Lesswatch"])

gulp.task('testLess', function () {
  return gulp.src('local/less/*.less')
  		.pipe(plumber())
        .pipe(less())
		.pipe(gulp.dest('dist/css'))
		.pipe(connect.reload());
});

5.配置完成後命令行執行gulp並回車，開啓本地服務器並監聽，此時可以使用less進行編譯並實時查看轉存後的css樣式表。