LESS on ColdFusion Builder 3

Posted: May 15, 2014 in Uncategorized

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"
  1. *cough* IntelliJ *cough*

  2. I’d recommend using a build process to handle these types of things rather than your IDE / editor, for a couple of reasons. Ideally you want to store your configuration with your project so that when you move to another machine or work with another developer you don’t have to remember which files get compiled and placed into which directory, and you don’t have to manually set anything up (watch folders, etc). It’s also good to have everyone using the same build process and build tools, regardless of which IDE / editor they use, or which OS they are on.

    It’s easy to install Node JS and Grunt for this type of build process, and you’ll find packages for pretty much everything.. LESS, SASS, CSS and JS minimization, CoffeeScript, etc. With a fairly simple config you can have your build process watching all your files 🙂

    • Chris says:

      I’ve heard of a lot of grunting ;). I guess it’s time to check it out. Thanks for the suggestion!

      • Chris says:

        Although one thing I can think of, if a third party application is watching and compiling, Eclipse won’t update the related project files (the generated CSS) which is needed for SVN commits.

  3. “In the end, if Adobe wants to use Eclipse as their IDE for ColdFusion, they need to step up and make sure there are reasonably good, professional-grade resources to accomplish common tasks. These would include CSS, LESS, SASS, JavaScript, CoffeeScript and the works.”

    So to be clear, you want the team to build all of these into the editor? Sorry but I couldn’t disagree more. It is going to be near impossible to add all of those features, and why should they when not everyone is using Less, Sass, CoffeeScript. What about TypeScript? Where does it stop?

    To me, the whole point of being on Eclipse is to enable folks to use plugins that make sense for their development. It sounds like you had bad luck with Less, but I don’t agree it is a problem the team needs to solve.

    • Chris says:

      Okay, good point Ray. I guess I just still hate Eclipse and that’s my underlying issue.

      • cfjedimaster says:

        I hear ya – Eclipse is…. needy. 😉 For me, since I do less CF work these days, I don’t mind creating a project to do work, and once I’ve done it, I don’t think about it. Do I wish I could fire it up as fast as Sublime, and from the CLI? Yes. Can I live w/o it? Yes. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s