css - eclipse pdt 中不明显的 lesscss 编译器

Question

我想使用像 dotless 这样的 less 编译器作为 eclipse 构建器。如果我将构建选项“运行构建器:”设置为“在自动构建期间”，构建器每 5-10 秒运行一次(没关系)，但它也会要求我保存，而不是忽略未保存的文件。

作为解决方法，我激活工作区选项“构建前自动保存”并将 Ctrl+S 绑定(bind)到“全部构建”

有没有更好的解决方案？

Answer 1

为了在 Eclipse 中自动将 LESS 转换为 CSS，我解释了两种可能的方法。

1. 使用插件
2. 如何手动完成

(我在编写插件后编辑了这篇文章，所以手动方式是旧方式，原始帖子包含了一段时间，你可能刚才在这里看到过)

要求

对于任何一种解决方案，您都需要安装 node 和 lessc(less 编译器)。

使用以下命令通过 npm 安装 lessc:

npm install -g less-compiler
npm install -g less

1。安装 Eclipse Transpiler 插件

我写了一个 eclipse 插件来处理 eclipse 中的转译。只需安装它并按照元素自述文件中的说明为您的元素配置转译。

-> https://github.com/gossi/eclipse-transpiler-plugin

2。手动安装构建器

我自己写了一个小的 shell 脚本，它在每次保存到 .less 文件后运行 lessc。但是，eclipse 保留自己的环境，因此在 eclipse 中没有可用的 %PATH 变量。因此，您需要 lessc 命令的完整路径，您可以使用 which lessc 找到它:

$ which lessc
/usr/local/bin/lessc

另外，由于lessc运行在node环境下:

$ head -n1 /usr/local/bin/lessc
#!/usr/bin/env node

你不能直接运行它，因为 eclipse 不知道你的环境。您需要在前面添加节点命令，以在 eclipse 中实现 lessc 调用:

$ which node
/usr/local/bin/node

lessc 的 完整路径 的 shell 脚本是:

#!/bin/bash

/usr/local/bin/node /usr/local/bin/lessc css/*.less > css/*.css

您可以根据您的元素调整输入和输出源。为了让它在 Eclipse 中运行，我们需要让它作为构建器运行。给你:

1. 右键单击您的元素 > 属性 > 构建器。
2. 点击 New，选择 Programm 并给它起一个很酷的名字
3. “主要”选项卡
   • 位置:这里选择shell脚本
   • 工作目录:我选择了元素文件夹
4. “刷新”选项卡
   • [x]完成后刷新资源
   • [x] 具体资源
   • 点击“指定资源...”
   • 勾选编译后需要刷新的资源，一般是css文件
   • 递归包含子文件夹取决于您和您的元素
5. “构建选项”
   • [ ] 分配控制台(取消选中，我们希望它静音，打开它进行调试)
   • [x] 在后台启动
   • 运行生成器
     • [ ]“干净”之后
     • [x] 在手动构建期间
     • [x] 在自动构建期间
     • [ ] 在“清洁”期间
   • [x] 指定相关资源的工作集
   • 点击“指定资源...”
   • 选择您要编译的资源，通常是您的 .less 文件。请注意，不要在此处选择带有 css 文件的文件夹，它会在构建后刷新，无论如何您的 eclipse 可能会在这里陷入永无止境的循环。所以 .less 文件就足够了。

现在，打开一个 .less 文件，做一些更改并保存。打开编译后的 .css 文件 - tada :)

window :

我认为这也适用于 Windows，使用相应的 .bat 文件。

玩得开心