14 Replies Last post: May 4, 2013 6:22 PM by Philip Tyrer  
Philip Tyrer Newbie 13 posts since
Mar 13, 2013
Currently Being Moderated

Mar 13, 2013 1:45 PM

Setting up LESS watcher

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.

Attachments:
Fedor Korotkov Newbie 74 posts since
Feb 23, 2012
Currently Being Moderated
Mar 13, 2013 2:25 PM in response to: Philip Tyrer
Re: Setting up LESS watcher

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/

Fedor Korotkov Newbie 74 posts since
Feb 23, 2012
Currently Being Moderated
Mar 13, 2013 3:29 PM in response to: Philip Tyrer
Re: Setting up LESS watcher

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".

Andriy Bazanov Master 3,639 posts since
May 28, 2010
Currently Being Moderated
Apr 25, 2013 12:09 AM in response to: Philip Tyrer
Re: Setting up LESS watcher

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):

screen01.png

 

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

Andriy Bazanov Master 3,639 posts since
May 28, 2010
Currently Being Moderated
Mar 13, 2013 4:21 PM in response to: Philip Tyrer
Re: Setting up LESS watcher
  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)

Elena Pogorelova Apprentice 668 posts since
Oct 5, 2011
Currently Being Moderated
Mar 13, 2013 5:10 PM in response to: Philip Tyrer
Re: Setting up LESS watcher

>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

Elena Pogorelova Apprentice 668 posts since
Oct 5, 2011
Currently Being Moderated
Mar 13, 2013 4:28 PM in response to: Philip Tyrer
Re: Setting up LESS watcher

>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)

ac turbo Newbie 1 posts since
Apr 7, 2013
Currently Being Moderated
Apr 7, 2013 8:20 PM in response to: Andriy Bazanov
Re: Setting up LESS watcher

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

Julia Jacobs Newbie 1 posts since
Apr 25, 2013
Currently Being Moderated
Apr 25, 2013 12:01 AM in response to: Andriy Bazanov
Re: Setting up LESS watcher

You rock.

Wes Broadway Newbie 1 posts since
Sep 16, 2012
Currently Being Moderated
Mar 24, 2013 7:20 PM in response to: Philip Tyrer
Re: Setting up LESS watcher

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.

More Like This

  • Retrieving data ...