在eclipse pdt中不可思议的lesscss编译器 [英] unnoticeable lesscss compiler in eclipse pdt

问题描述

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

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

有没有更好的解决方案？

解决方案

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

1. 使用插件


2. 如何手动执行

（我在编写插件后编辑了这篇文章，所以手工方式是旧的方式，原来的帖子包含一段时间，你可以在此之前看过）

要求

对于任一解决方案，您需要安装节点和 lessc （较少编译器）。

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

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

1。安装Eclipse Transpiler Plugin

我写了一个eclipse插件来处理Eclipse中的泛化。只需安装它，并按照项目自述文件中的说明为项目配置透明度。

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

2。手动安装构建器

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

  $ lessc 
 / usr / local / bin / lessc 
  

另外，因为 lessc 在节点环境中运行：

  $ head -n1 / usr / local / bin / lessc 
＃！/ usr / bin / env node 
  

您无法直接运行，因为eclipse不了解您的环境。您需要先添加node命令，才能在eclipse中实现一个 lessc 调用：

  $哪个节点
 / usr / local / bin / node 
  

shell脚本完整路径到 lessc 是：

 ＃！/ bin / bash 
 
 / usr / local / bin / node / usr / local / bin / lessc css / *。 css / *。css 
  

您可以根据项目调整输入和输出源。为了在eclipse中运行，我们需要使其作为构建器运行。在这里你去：

1. 右键点击你的项目>属性> Builders。


2. 点击新建，选择程序并给它一个很好的名字


3. 主选项卡
   
   
   
   
   • 位置：在这里选择shell脚本
   
   
   • 工作目录：我选择项目文件夹
   
   


4. 刷新Tab
   
   
   
   
   • [x]完成后刷新资源
   
   
   • [x]具体资源
   
   
   • 点击指定资源...
   
   
   • 检查编译后要刷新的资源，通常是css文件
   
   
   • 递归地包含子文件夹依赖于您和您的项目
   
   


5. 构建选项
   
   
   
   
   • [  ]分配控制台（取消选中，我们要保持静音，打开调试）
   
   
   • [x]背景中启动
   
   
   • 运行Builder
     
     
     
     
     • [ ]干净之后
     
     
     • [x]手动构建期间
     
     
     • [x]自动构建期间
     
     
     • [ ]在干净
     
     
     / li>
     
   • [x]指定相关资源的工作集
   
   
   • 点击指定资源...
   
   
   • 选择您要编译的资源，通常是您的.less文件。一个注意事项，请不要在这里选择带有css文件的文件夹，这些文件将在构建后刷新，无论如何，您的eclipse可能会在这里永无止境。所以没有文件就够了。
   
   

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

Windows：

我认为这也可以在Windows上工作，用一个.bat文件。

玩得开心

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.

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

Is there a better solution?

解决方案

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

1. Using a Plugin
2. 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:

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
4. "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
5. "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.

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

Windows:

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

Have fun

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