vscode的gulp-less自动把less编译成css

由于我也在不断学习中，若是有总结的不到位的地方，请见谅，也乐意可以和你们一块儿学习和进步。

less编译成css的方法有好几种，手动的，自动的，还有引入less.min.js压缩文件的,这里我主要分享一下用gulp-less自动编译方法

第一步：基于node.js的gulp,全部先安装好node.js（怎样测试是否安装好，我在其余文章里提了一下https://blog.csdn.net/weixin_36706903/article/details/80990568，后期有时间单独写一篇配置文章）

第二步：建项目文件，这里由于是要用gulp下面的gulp-less，因此重点说一下这方面的文件搭建

一、package.json文件能够在cmd中根目录下输入npm init自动生成，

根目录下点击鼠标右键+shift快捷键弹出菜单，点击进入powershell,

powershell中,进入cmd同理

这里也有简单方法的，后面专门分享一篇项目搭建配置的方法

二、生成node_modules，cmd中输入npm install

三、这里注意package.json的配置，我用的插件比较多，因此下的多，不要被吓到了哈。这里只须要把gulp和gulp-less下载好就可以完成less编译css了

在cmd中输入命令

npm install gulp --save-dev 下载gulp

npm install gulp-less --save-dev 下载gulp-less

四、这里注意路径，根目录最好是“爸爸”级别，避免后面执行任务的时候忽略了路径报错；注意gulpfiles.js文件名字不能改，必须这样写，主要是拿来引用gulp的任务以及执行任务（怎样执行任务，我在其余文章中总结了二种方法，供参考https://blog.csdn.net/weixin_36706903/article/details/80990568）

五、引用gulp和gulp-less

const gulp=require("gulp")

const less=require("gulp-less")

六、测试gulp

执行结果以下：

七、我写了二个任务，仅供参考

第1个任务目的：把静态资源里的less文件夹里的全部less用less（）编译，而后管道输出到静态资源下的css文件夹

//less文件转化

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

return gulp.src("src/public/less/*.less")

.pipe(less())

.pipe(gulp.dest("src/public/css"))

})

第2个任务目的：由于我写了less我要看样式是否正确，全部须要实时编译成css文件（这里个人HTML中仍然是引用的css/xxx.css文件哈）

这里我用的gulp.watch（）方法

当我less文件夹中任何一个less结尾的文件发生了改变，就执行个人第一个任务，即把我全部的less编译成css

//监听全部less发生变化，less_change_css执行，实时更新css

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

return gulp.watch("src/public/less/*.less",["less_change_css"])

})

执行结果以下：自动给我生成css以及里面的css文件

八、按照以上步骤，就实现了像写原生Css同样，可以实时看到页面的样式效果

九、不足：这里须要注意

当你的less语法错误，gulp任务就会报错，以及中止监放任何less文件，全部偶尔瞟一瞟命令提示符中是否报错

若是报错，把，less语法改正确后，从新执行一下上面的gulp监放任务就能够了

若是你的less比较好，就可以从头至尾都不会停下监听

若是和我同样偶尔会出现问题，那天天仍是须要从新执行几回任务的哟

但愿对你们有帮助！！