温州茗岙乡微信小程序实时监听less文件编译成wxss文件,全局命令工具和less-to-wxss

阅读 23372  ·  发布日期 2020-08-24 17:26  ·  温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】 我们的微信小程序项目选择的技术栈是:原生 + 内嵌h5,技术选型没毛病,就是觉得哪里怪怪的。同样的设计稿,通常h5开发比小程序开发快,郁闷,为啥呀?小程序提供了很多封装好的组件,为什么开发起来还是效率低,找到问题的根源之一,小程序原生开发,样式使用的是 wxss,不能使用嵌套语法,开发效率自然而然就打了折扣,后期 wx... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...

微信小程序实时监听less文件编译成wxss文件,全局命令工具和less-to-wxss

我们的微信小程序项目选择的技术栈是:
原生 + 内嵌h5,技术选型没毛病,就是觉得哪里怪怪的。
同样的设计稿,通常h5开发比小程序开发快,郁闷,为啥呀?小程序提供了很多封装好的组件,为什么开发起来还是效率低,找到问题的根源之一,小程序原生开发,样式使用的是 wxss,不能使用嵌套语法,开发效率自然而然就打了折扣,后期 wxss 维护起来也比较麻烦。
前世用 wxss 开发太慢了,微信小程序原生开发,我不想写wxss了。
想着微信小程序都出来这么久,应该有成熟的方案来解决这个问题,于是我找到了以下几种方案。
方案一:
webstorm配置less自动编译这种方案适合使用 webstorm 编辑器开发者,无奈我现在钟情于 VSCode(或者微信开发者工具,调试还是要用它) ,并不想使用 webstorm ,只好再寻觅其它的方案了。
使用 webstorm 编辑器开发者可以按照以下参考文章配置。
webstorm配置less自动编译webstorm less文件编译成wxss文件配置方案二:
用gulp-less自动编译引用 gulp 的任务流执行任务,gulp-less 一个 gulp 自动化构件工具的一个插件,专门用来处理 less 文件使其产出 css 文件提供给生产环境使用。
这种方案,可以用,还不太符合我的要求,我懒,不想手动编译啊。
寻寻觅觅寻找到下一个解决方案。
gulp-less gulp打包处理less方案三:
wxss-cli:
全局命令行 + 路径终于找到一个还不错的解决方案,echo008开发的wxss-cli,这个工具全局安装后,运行 wxss ./path来将 less 编译成 wxss。
使用了一周发现,每天到公司开发,都需要先去拷贝要编译项目的目录,我不想每次都拷贝路径啊。
并且编译的时候会把 node_modules 里的less也给编译。
这样编译的速度就慢了。
我只想,在我的项目根目录下面pages 和 components文件下编译,没有办法吗?这三种方案,没有一个用着顺手的......今生于是我就给wxss-cli的作者提了issues,一周过去了作者没理我。
等不了了,不行就自己上,扒源码,改成了符合我要求的。
那个目录需要编译 less,就在哪个文件目录下,执行命令 less-to-wxss watch,进行实时监听,将 less 自动转换成 wxss 文件。
用着甚是顺手。
我又给作者留了issus,没理我,好像其它几个issus也没理,可能作者太忙了没顾上。
终于支持多个终端里面执行 less-to-wxss watch 了。
这个插件对于小程序原生开发的猿猿们来说,真是太好用了。
一个插件就新鲜出炉了。
需要的自取。
less-to-wxss的npm包less-to-wxssless-to-wxss的优点:
不用传路径全局安装,一键编译 less-to-wxss watch自持多终端,多目录使用改进后的 less-to-wxss 的实现原理,通过输入命令,获取到当前位置路径,对改目录下的文件进行文件遍历监听,通过 less 工具将 less 编译成 wxss, 重命名后保存到原目录下。
原 less 文件更新继续上述的流程操作。
推荐教程:
《微信小程序》以上就是微信小程序实时监听less文件编译成wxss文件,全局命令工具和less-to-wxss的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
微信小程序本文转载于:
掘金社区,如有侵犯,请联系a@php.cn删除
上一篇:
看不到关联的小程序怎么办?
下一篇:
微信小程序里怎样定位好友?相关文章相关视频微信小程序图片无法显示怎么办?微信小程序:
一个json帮你完成分享朋友圈图片自学微信小程序从零到一:
项目构建后http请求封装微信小程序-canvas生成图片并保存到本地微信小程序实时监听less文件编译成wxss文件,...初识微信小程序(2)深入了解微信小程序(一)深入了解微信小程序(四) [温州做小程序]