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.
- 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.
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
You could use a tool to watch your LESS files and compile on change:
- OS X: LESS.app
- Windows: WinLess