当前位置：文江博客话题详情

eclipse pdt 中不明显的 lesscss 编译器

发布于 2024-12-08 22:05:33 字数 192 浏览 1 评论 0原文

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

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

是否有更好的解决方案？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陈甜 2024-12-15 22:05:33

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

使用插件
如何手动执行

（我在编写插件后编辑了这篇文章，因此手动方式是旧方式，原始帖子包含了一段时间，您可能已经在这里看到了不久前）

要求

对于任一解决方案，您都需要安装 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 在节点环境上运行：

$ 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 中运行，我们需要使其作为构建器运行。在这里：

右键单击您的项目>属性>建设者。
单击“新建”，选择“程序”并为其指定一个很酷的名称
“主”选项卡
- 位置：在此处选择 shell 脚本
- 工作目录：我选择了项目文件夹
“刷新”选项卡
- [x] 完成后刷新资源
- [x]特定资源
- 点击“指定资源...”
- 检查编译后要刷新的资源，通常是css文件
- 递归包含子文件夹取决于您和您的项目
“构建选项”
- [ ] 分配控制台（取消选中，我们希望它保持安静，打开它进行调试）
- [x] 在后台启动
- 运行生成器
  - [ ]“干净”之后
  - [x] 在手动构建期间
  - [x] 在自动构建期间
  - [ ]“清洁”期间
- [x]指定相关资源的工作集
- 点击“指定资源...”
- 选择您要编译的资源，通常是 .less 文件。注意，不要选择此处包含 css 文件的文件夹，该文件夹在构建后会刷新，无论如何您的 eclipse 可能会陷入永无止境的循环中。所以 .less 文件就足够了。

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

Windows：

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

玩得开心

To automatically transpile LESS to CSS in Eclipse, I explain two possible ways.

Using a Plugin
How to do it manually

(I edited this post after I wrote the plugin, so the manual way is the old way, that the original post contained over some time, which you may have seen here a while ago)

Requirements

For either solution you need to install node and lessc (the less-compiler).

Installing lessc through npm with the following commands:

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

1. Install the Eclipse Transpiler Plugin

I wrote an eclipse plugin to handle transpiling in eclipse. Just install it and follow the instructions on the project readme to configure transpiling for your project.

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

2. Manually install a builder

I wrote myself a little shell script that runs lessc after every save on a .less file. However, eclipse keeps its own environment, thus no %PATH variables are available in eclipse. So, you need the full path to the lessc command, which you can find with which lessc:

$ which lessc
/usr/local/bin/lessc

Also, because lessc runs on a node environment:

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

You cannot run this directly, because eclipse doesn't know about your environment. You need to prepend the node command, to achieve a lessc call in eclipse:

$ which node
/usr/local/bin/node

The shell script with the full path to lessc is:

#!/bin/bash

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

You may adjust the input and output sources according to your project. In order to make that run in eclipse we need to make it run as a builder. Here you go:

Rightclick on your project > Properties > Builders.
Click New, choose Programm and give it a cool name
"Main" Tab
- Location: Choose the shell script here
- Working Directory: I choosed the project folder
"Refresh" Tab
- [x] Refresh resources upon completion
- [x] Specific resources
- Click on "Specify Resources..."
- Check the resources that you want to be refreshed after the compilation, typically the css files
- Recursively include sub-folders depends on you and your project
"Build Options"
- [ ] Allocate Console (uncheck, we want it silent, turn it on for debugging)
- [x] Launch in Background
- Run the Builder
  - [ ] After a "clean"
  - [x] During manual builds
  - [x] During auto builds
  - [ ] During a "clean"
- [x] Specify working set of relevant resources
- Click "Specify Resources..."
- Choose the resources you want to compile, typically your .less files. A Note, don't select the folder with css files here, that gets refreshed after the build, anyway your eclipse might get catched in a never-ending-loop here. So .less files will be enough.