Setting up LESS watcher Follow

Hi Philip,

Program is an executable. In your case it's a less compiler.

If you open a less file you should notice a promt to add a file watcher. Do you see it? See this screencast for details http://www.youtube.com/watch?v=hUEgcBCxrQE

Also here is a useful blogpost about file watchers http://blog.jetbrains.com/webide/2013/03/file-watchers-in-webstormphpstorm-6-a-k-a-background-tasks/

Yes I have added a watcher but it complains about "Please set a program to run" if I add (from the video) "/usr/local/bin/lessc". I tried pointing it to the less.js downloaded from lesscss.org but that gives me the error shown in my first post. So... where do I get the less "program" and how do I install it? This does not work out of the box and instructions so far have been fuzzy.

As I understand less.js is for client side compilation(dynamicly in browser). But you need a server side compiler. Just install it with "npm install -g less".

You are on Windows.

1. Download nodejs installer from http://nodejs.org/download/ (for x64 it will be http://nodejs.org/dist/v0.10.0/x64/node-v0.10.0-x64.msi )
2. Install nodejs -- default settings will be just fine
3. In console -- type and execute "npm install -g less" -- this will install less globally: https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS
4. Restart PhpStorm in case it was opened when you were installing that stuff -- this is so it can use new values of PATH variables (possibly even restart PC -- but I had no need for this)
5. That's it -- start using it

When I opened .less file in PhpStorm it offered to setup watcher. I agreed and it picked up everything on it's own -- I just told it to not to compile on every key press (wait until I Save the file). This is how it looks for me -- working fine (the path to lessc.cmd can be different on your system):


Alternatively:
If you do not want to deal with nodejs (for whatever reason) -- you can use LESS.js for Windows (which does not require nodejs). In this case you will have to configure watcher manually as it uses different parameter format and order: http://devnet.jetbrains.com/message/5478917#5478917

Ahhh awesome! That works. Two things left I can't work out:

1. Output to a different folder: I have /less and /css in project and $ProjectFileDir$\css\$FileNameWithoutExtension$.css doesn't seem to work for output path.
2. Compressing output. I'm guessing this is a 2nd watcher running on the css file?

Thanks.

1. "Output path" field in File Watchers screen uses relative paths, something like ../css/$FileNameWithoutExtension$.css may work (at least works for me)

2. Either add extra options for that (see already mentioned documentation page: https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS  : --compress and/or --yui-compress) or setup additional watcher manually (YUICompressor or whatever) -- put it below LESS one (they will run one after another)

>Output to a different folder: I have /less and /css in project and  $ProjectFileDir$\css\$FileNameWithoutExtension$.css doesn't seem to work  for output path.

did you specify this path in 'Output paths' field? This field just tells the IDE where to look for created files (and has no meaning for the program being run, i.e. to your less2css compiler). Youy have to modify the Artguments field accordingly, like '--no-color $FileName$ >   $ProjectFileDir$\css\$FileNameWithoutExtension$.css'

>Compressing output. I'm guessing this is a 2nd watcher running on the css file?

yes. You can use the YUI Compressor CSS file watcher for this (but you still have to install the YUI compressor to be able to use it)

Weee! You rock Andriy! I'm on the awesome-wagon now!

Still not sure why

$ProjectFileDir$\css\$FileNameWithoutExtension$.css

or

$ProjectFileDir$/css/$FileNameWithoutExtension$.css

don't work but relative paths like:

../css/$FileNameWithoutExtension$.css

do.

Thanks Elena. Best option for compressing less is to add argument --yui-compress.

>Still not sure why

>
>$ProjectFileDir$\css\$FileNameWithoutExtension$.css

>
>or

>
>$ProjectFileDir$/css/$FileNameWithoutExtension$.css

>
>don't work

it's a bug - please, watch http://youtrack.jetbrains.com/issue/WEB-7109

Just wanted to point out another way to have your LESS files get automatically compiled to CSS, and node is NOT required:

LESS CSS Compiler (phpStorm/webStorm) - http://plugins.jetbrains.com/plugin?pr=webide&pluginId=7059

Then all you do is set up the folders you wish to watch. You can use standard LESS code to minify, (//simpless:minify)... I don't understand why the IDE doesn't yet have this baked in, where you don't have to install node on one of your machines. This plugin does it all, right from within the IDE.

many thanks for posting.

Your instructions didn't quite work for me, mainly because i'm very new to node so i took your instructions literally and they didn't work as posted. I eventually figured it out so i'm posting minor corrections for anyone else experience issues getting node and LESS propertly installed and configured:

Installing Node to Windows:

1. Download nodejs installer from http://nodejs.org/download/ (for x64 it will be http://nodejs.org/dist/v0.10.0/x64/node-v0.10.0-x64.msi )
2. Install nodejs -- default settings should be just fine
3. Reboot (otherwise, "npm" will not be found)
4. Run DOS Command Prompt In console , - type and execute "nmp install -g less" -- <--- "nmp" is a spelling mistake
   
5. Type and execute "npm install -g less", this will install less globally: https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS
   
   To confirm success, you should see several lines confirming that LESS is being installed:
   
   C:\Users\<you>\AppData\Roaming\npm\lessc -> C:\Users\<you>\AppData\Roaming\npm\node_modules\less\bin\lessc
   less@1.3.3 C:\Users\<you>\AppData\Roaming\npm\node_modules\less
   └── ycssmin@1.0.1
   
   
6. Note: If you are experiencing issues, or have already tried to unsuccessfully install LESS, then run "node.exe", enter "npm cache clean", exit and repeat #5
   
7. Restart  PhpStorm/WebStorm 6 in case it was opened when you were installing that stuff --  this is so it can use new values of PATH variables (possibly even  restart PC -- but I had no need for this)
8. That's it -- start using it

ac

You rock.

Cool Wes, I might try that out. It's one of those things though that once its up and running you don't have to worry too much unless and I like just having one place to set up multiple "watchers" for different things rather than separate plugins for LESS, SASS, JS, etc.

I just ran into issues with slashes form the last update. Just resolved a bug on it and it turns out that the relative URL for CSS output has to use \ not / now. So just a note for anyone that may be having the hair-pulling bizarreness that I had the last couple of days (variables complaining about being unresolved etc). So:

..\css\$FileNameWithoutExtension$.css

not

../css/$FileNameWithoutExtension$.css

Which seemed to work in 6.0.

Ahhh, perhaps because the bug Elana linked to was resolved...