在eclipse pdt中不明显的lesscss编译器 [英] unnoticeable lesscss compiler in eclipse pdt

问题描述

我想使用较少的编译器，如dotless作为eclipse构建器。如果我将构建选项运行构建器：设置为在自动构建期间，构建器每隔5-10秒运行一次（确定），但它也要求我保存，而不是忽略未保存的文件。

I want to use a less compiler like dotless as eclipse builder. If I set the build option "Run the builder:" to "During auto builds", every 5-10 sec the builder is runing (thats ok) but it also ask me to save, instead of ignoring the unsaved files.

作为解决方法我激活工作区选项在构建之前自动保存，并将Ctrl + S绑定到构建所有

As workaround I activate the workspace-option "Save automatically before build" and bind Ctrl+S to "build all"

推荐答案

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

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

1. 使用插件


2. 如何手动操作

（我在编写插件后编辑了这篇文章，所以手动的方式是 old 方式，原始的post包含了一段时间，你可以

(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)

对于任一解决方案，您需要安装

For either solution you need to install node and lessc.

安装 lessc

Installing lessc through npm with the following command: npm install -g lessc

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

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

我自己写了一个shell脚本，在每次保存.less文件后运行 lessc 。然而，eclipse保持自己的环境，因此在eclipse中没有％PATH 变量可用。因此，您需要使用 lessc 命令的完整路径，您可以使用 which lessc ：

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

此外，由于 lessc 在节点环境中运行：

Also, because lessc runs on a node environment:

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

你不能直接运行这个，因为eclipse不知道你的环境。您需要预先添加node命令，才能在eclipse中实现 lessc 调用：

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

shell脚本完整路径到 lessc 是：

The shell script with the full path to lessc is:

#!/bin/bash

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

您可以根据项目调整输入和输出源。为了使它在eclipse中运行，我们需要使它作为一个构建器运行。

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:

1. 右键点击您的项目>属性>构建器。




3. Main标签
   
   
   
   • 位置：选择此处的shell脚本
   
   
   • 工作目录：我选择了项目文件夹
   
   

1. Rightclick on your project > Properties > Builders.
2. Click New, choose Programm and give it a cool name
3. "Main" Tab
   • Location: Choose the shell script here
   • Working Directory: I choosed the project folder

• [x]完成后刷新资源


• [x]特定资源


• 
  
• 检查编译后要刷新的资源（通常为css文件）


• 递归包含子文件夹取决于您和项目

• [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

• [ ]分配控制台，打开它进行调试）


• [x]在后台启动


• 运行生成器
  
  
  <
  
  • [x]在自动构建期间
  $ b $ b
  • [ ]在干净期间
  
  
  • [  ] 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"

    现在，打开一个.less文件，做一些修改和保存。打开编译的.css文件 - tada：）

    Now, open a .less file, do some changes and save. Open the compiled .css file - tada :)

    Windows：

    ，带有.bat文件。

    I think this will work on windows too, with an according .bat file.

    有趣

    这篇关于在eclipse pdt中不明显的lesscss编译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！