PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

Question

How do, using File Watchers in PHPStorm do I set up LESS file watchers output path to do this:

I want:

/project/path/less/dir/file.less

to output to:

/project/path/css/dir/file.css

or

/project/path/less/file2.less

to output to:

/project/path/css/file2.css

I'm not seeing a clear way to make this happen with the Output Path macros in PHPstorm. With the FileDirRelativeToProjectRoot macro, I'm able to get the path to the current directory, but there is no clear way to replace /less with /css in the path.

Solution 1

See my related answer for JADE file watcher, I believe it would be the same for LESS.

The trick is to use $FileDirPathFromParent(dir)$ macro:

$ProjectFileDir$/css/$FileDirPathFromParent(less)$ will produce /project/path/css/dir/ for a file located in /project/path/less/dir/ directory.

Solution 2

I want to compile one less file from

sites/all/themes/bic/res/less/style.less to sites/all/themes/bic/res/css/style.css

Here's what I did

So the Arguments I used is: --no-color $FileName$ ../css/$FileNameWithoutExtension$.css

This will produce: /usr/local/bin/lessc --no-color blogs.less ../css/blogs.css at phpstorm console, and works fine.

I might miss something. Anyway, I tried both "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$" and "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css". Neither of them work for me. So just post my solution here, which might help some people who has the same trouble with me..

Solution 3

Just change Output Path to Refresh to:

../css/$FileNameWithoutExtension$.css

Update:

In the new version of LESS you should reverse your slashes in Path you specify. So it should be:

..\css\$FileNameWithoutExtension$.css

Comments

[M8R-1jmw5r]

IIRC this was outlined in the demo video of the feature. Do you know which video I mean?

[aaronp]

No, I don't. Can you please provide a link?

[LazyOne]

../css/filename.css -- will go one level up and then in css folder (relative to the current file). For deeper location (css/dir/file.less) I think you will have to use separate file watcher with different scope ("Settings | Scopes"). If that will not work, then better stick with simpler folder structure.

[M8R-1jmw5r]

@aaronp: youtube.com/watch?v=TtdIm1EKLBk I think it was, looking for the blog-post now.

[M8R-1jmw5r]

I don't find the original announcement any longer, the blog has been re-arranged, let me know if the video does not help.

[aaronp]

@M8R-1jmw5r the video only shows how to output in the same path. ie. /css/myfile.less outputs to /css/myfile.css.

[aaronp]

@LazyOne I've taken a look at scopes, but I'm not sure how they help accomplish this. Basically I need the file path, and need to replace "less" with "css" in it.

[M8R-1jmw5r]

Well, the Macros are not that flexible in PHPStorm. You can not provide parameters and say which directory ranges from the path you want to retain and which ones to replace. Maybe you're lucky and you can fill the gap by combining two macros.

[CrazyCoder]

@M8R-1jmw5r, actually you can, see my answer.

[M8R-1jmw5r]

@CrazyCoder: Yes I've looked, especially at the link. Thanks for the hint, I did not know that some of these have parameters.

[Anders Östman]

Worth mentioning is that I got problems when an "Output path to refresh" was given and "Create output file from stdout" was checked... When I unchecked "Create output file from stdout" everything worked fine.

[Ryre]

I found this to be the simplest solution.

[johnsnails]

My first thoughts were to do this but it didn't work for me.

[johnsnails]

I pretty much did the same thing. Not sure if it is noteworthy or not, but I had an extra colon in my arguments. --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

[spetsnaz]

Setting output paths to refresh value to '$ProjectFileDir$\www\catalog\view\theme\mytheme\js' worked for me on Windows env. ~ as a future reference for myself

[Andrew Bogdanov]

What exactly doesn't work out for you? You don't see a file being created?

[Andrew Bogdanov]

@Radmation reverse slashes in path