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

因为我也在不断学习中,如果有总结的不到位的地方,请见谅,也乐意能够和大家一起学习和进步。
less编译成css的方法有好几种,手动,自动,还有引入less.min.js压缩文件的,这里我主要分享一下用gulp-less自动编译方法
第一步:基于node.js的gulp,所有先安装好node.js(怎样测试是否安装好,我在其他文章里提了一下 https://my.csdn.net/ ,后期有时间单独写一篇配置文章)
第二步:建项目文件,这里因为是要用gulp下面的gulp-less,所以重点说一下这方面的文件搭建
1、package.json文件可以在cmd中 根目录 下输入npm init自动生成,
根目录下点击鼠标右键+shift快捷键弹出菜单,点击进入powershell
vscode的gulp-less自动把less编译成css_第1张图片
powershell中,进入cmd同理
这里也有简单方法的,后面专门分享一篇项目搭建配置的方法
2、生成node_modules,cmd中输入npm install
3、这里注意package.json的配置,我用的插件比较多,所以下的多,不要被吓到了哈。这里只需要把gulp和gulp-less下载好就能够完成less编译css了
在cmd中输入命令
npm install gulp --save-dev 下载gulp
npm install gulp-less --save-dev 下载gulp-less
vscode的gulp-less自动把less编译成css_第2张图片
4、这里 注意路径 ,根目录最好是“爸爸”级别,避免后面执行任务的时候忽略了路径报错; 注意 gulpfiles.js文件名字不能改,必须这样写,主要是拿来引用gulp的任务以及执行任务(怎样执行任务,我在其他文章中总结了二种方法,供参考 https://blog.csdn.net/weixin_36706903/article/details/80990568
vscode的gulp-less自动把less编译成css_第3张图片
5、引用gulp和gulp-less
const gulp=require("gulp")
const less=require("gulp-less")
vscode的gulp-less自动把less编译成css_第4张图片
6、测试gulp
vscode的gulp-less自动把less编译成css_第5张图片
执行结果如下:
vscode的gulp-less自动把less编译成css_第6张图片
7、我写了二个任务,仅供参考
第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"])
})
vscode的gulp-less自动把less编译成css_第7张图片
执行结果如下:自动给我生成css以及里面的css文件
vscode的gulp-less自动把less编译成css_第8张图片
8、按照以上步骤,就实现了像写原生Css一样,能够实时看到页面的样式效果
9、不足:这里需要注意
当你的less语法错误,gulp任务就会报错,以及停止监听任何less文件,所有偶尔瞟一瞟命令提示符中是否报错
如果报错,把,less语法改正确后,重新执行一下上面的gulp监听任务就可以了
如果你的less语法比较好,就能够从头到尾都不会停下监听,nice
如果和我一样偶尔会出现问题,那每天还是需要重新执行几次任务的哟
vscode的gulp-less自动把less编译成css_第9张图片
希望对大家有帮助!!

你可能感兴趣的:(vscode的gulp-less自动把less编译成css)