LESS on ColdFusion Builder 3

At one time I was a fan of ColdFusion Builder 2.  However as I used it more and more, it just wasn’t mature enough and caused me frustrations. These where mostly attributed to it being built on top of Eclipse.

For the past few months now, I’ve heard so many people rave how good the new ColdFusion Builder 3 has become and that I should try it out again.

For reference, I’ve been using Sublime Builder 2 and 3 for a little over a year. Also, the project that needs this the most has the LESS source files and a large code base in separate SVN folders. I know, the SVN structure is a little screwy, but it fits the project good.

So for my first tackle: LESS editing and compiling.

Sublime Text

I have the package manager installed.

To get LESS editing working I install the LESS package and I’m done. It works.

To get LESS compiling I installed the Less2Css package, added to the project config my main LESS file and the output directory values.

Now everytime I save a LESS file, it compiles the main LESS files and dumps it into the correct directory.

This took me about 1/2 hour to research, install and test.

ColdFusion Builder 3

I have the Eclipse Marketplace installed.

To get LESS edit working, I installed the Eclipse plugin for LESS located at http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html. This was pretty straight forward and seems to work with a simple test or two.

Now is where the nightmare starts.

The default LESS Compiler is “lessc”. However, even though it is “lessc” that we want, it just won’t fire, saying it can’t find the file. I then changed it up to “lessc.cmd” after fumbling around for awhile trying to figure it out. This works, but I can’t get it to save into the specific folder I need it in, which is another project’s CSS folder. Instead, it just wants to save in the same directory. I fiddled around with the settings, but no go. I even tried adding a linked resource to both the LESS source folder from the main project and to the main source file folder from the LESS project. I submitted a issue ticket for help. Their documentation is quite lacking.

I ended up giving up trying to compile to the right directory using the plugin.

I looked at using “Crunch!” that a co-worker uses for the same client project. While this would work, it’s kind of clunky and is run outside of Eclipse. Which means opening another program, using more resources, and having to refresh the CSS folder inside Eclipse after it compiled. I abandoned this quite quickly.

I then installed “WinLess” which watches the directory and compiles upon changes. But that didn’t let me save to a specific directory, so I tossed that.

I then fiddled with creating an External Eclipse Tool. I don’t remember exactly what happened, but got frustrated and abandoned that too.

I finally found a solution that works pretty good. I created a new “Builder”. Now everytime I save a file, a command-line command is run and the LESS file is compiled into the correct folder and automatically refreshes the CSS folder in the Eclipse project.

I found out how to do this at http://stackoverflow.com/questions/7686281/unnoticeable-lesscss-compiler-in-eclipse-pdt under the “Manually installing a Builder” answer.

I run a .CMD file as such

CD C:\Users\[user]\node_modules\.bin
node ..\less\bin\lessc "C:\website\source\less\my1.less" "C:\website\css\my1.css"
node ..\less\bin\lessc "C:\website\source\less\my2.less" "C:\website\css\my2.css"