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样式表。