Setting up LESS watcher Follow
I Haven't been able to get it working in PhpStorm 6.
Firstly why does this not work (Windows env):
$ProjectFileDir$/js/less.min.js
for the Program field?
When I add an absolute path I get an error when it tries to compile the watched files saying less.min.js is not a valid Win32 application… Is there a chunk of the manual missing on how to actually get any of these watchers working?
I'm pretty keen to get this working cross platform, hence the desire for relative paths.
Attachment(s):
phpstorm6-lesswatcher.PNG
Please sign in to leave a comment.
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.
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:
Thanks.
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:
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
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...