Vim自动编译less为css

Vim自动编译less

想要实现的功能呢就是像其他编辑器一样,能够让我们写好less文件后,保存时自动在该目录下生成一个.css的css文件

开始

我们知道在linux中可以使用lessc [less文件路径] [css文件路径],这条命令来自动编译
那么我们想实现让vim保存的时候自动生成文件可不可以呢,百度上搜到的答案是这样的:
《Vim自动编译less为css》
首先需要安装nodejs、npm、最后再安装less
但是更改了自己的.vimrc后发现并不起作用

思路分析

我们一起来看一看这段vimscript,发现其逻辑好像没什么大问题,let命令定义变量分别是当前路径和文件名,然后execute是执行后面字符串中的命令,也就是command变量。
最后是在文件保存时自动调用这个函数,逻辑很正确,但是为什么就是没有生效呢,我们来看一看个command变量:
silent !这个的意思是执行一段外部命令,也就是i后面的lessc部分
那么我们猜测,有可能是路径错误,其时现在已经能发现一点问题了,就是这个lessc后面就跟了一个变量是.css结尾的,这肯定是不对的,不加.less文件的路径,命令怎么知道我们要编译的是哪个文件呢。

逐步推测

那么我们就先看看上面搜到的lessc后面跟的路径到底是什么
先展示一下我的文件目录:
《Vim自动编译less为css》
直接在vim的中敲:《Vim自动编译less为css》
我们来看一下结果:
《Vim自动编译less为css》
很离谱对吧,lessc命令后面跟了这么一个路径怎么可能执行成功

我们来梳理一下这段脚本的应有的正确逻辑:

1.获取到less文件的绝对路径,给后面加上/…/这样就能变成父目录的路径
2.获取到这个less文件的名字,不要拓展名,好给后面加上.css
3.执行的command应该是” lessc [父目录的路径加上less的文件名] [父目录的路径加上css文件的文件名] “
4.最后执行command

看一下原本的文件名和路径名对不对:

路径名:

《Vim自动编译less为css》
《Vim自动编译less为css》
给后面加上/…/就能变成父目录的路径了,正确。

文件名:

《Vim自动编译less为css》
《Vim自动编译less为css》
出问题喽!我们想要的是单纯的文件名,不想带着什么别的路径

到此!我们已经知道问题所在了——–lessc命令的后面的路径参数出了问题,只要改成正确的就行

最终解决

《Vim自动编译less为css》
要改得是filename和command变量。为什么这么改呢,容我细细道来—+

  1. 首先文件名是必改的,要改成纯粹的文件没,不带一点路径的那种。
    那首先要了解的就是exoand()括号中的%:r这个是什么意思,前面的%是当作变量名,后面的:r是修饰符,:r的意思是只保留根部,去掉拓展名,但这里光去掉拓展名还不够,我们需要另一个修饰符,那就是:t意思是只保留最后一部分,这样我们就能取出来纯粹的文件名了。
  2. command路径我们用current_file . ‘/…/’当作父目录的路径,很容易就可以按照lessc的命令格式把command拼接出来

《Vim自动编译less为css》

《Vim自动编译less为css》
保存less文件后自动在当前目录下生成同名css文件

知识总结

  1. vimscript中使用 . 来拼接字符串
  2. let用来定义变量
  3. excute用来执行一段字符串形式的命令,其中”silent !”代表执行外部命令
  4. expand修饰符的使用的使用
    “%”显示文件名:《Vim自动编译less为css》
    “%:p”拓展为完整路径即绝对路径:
    《Vim自动编译less为css》
    “%:r”去掉拓展名:
    《Vim自动编译less为css》
    “%:t”取最后一段:
    《Vim自动编译less为css》
    “%:e”只取拓展名:
    《Vim自动编译less为css》
    原文作者:旋风不炫
    原文地址: https://blog.csdn.net/wjc19991221/article/details/109488364
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞