unnoticeable lesscss compiler in eclipse pdt

こ雲淡風輕ζ 提交于 2019-12-03 21:43:37
gossi

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

Mark Lagendijk

You could use a tool to watch your LESS files and compile on change:

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!