I am trying to compile a .scss file in sass directory to a sibling css directory. However, I am not able to. I dint find enough documentation on the file watcher plugin as well.
Currently, it is compiling into the sass directory. And I need to compile into css directory.
I am able to compile it manually using
sass --watch sass/file.scss:css/file.css
How do I do it using Intellij File Watcher plugin?
I tried using the macros but I dont think I understand macros much, because I either get directory not found or .scss file not found. I am aware that I have to change the argument input in some way, but
--watch sass/file.scss:css/file.scss
dint work.
Pl help.
I am guessing you may have figured this out by now. But this may be helpful for future searches.
You don't need to add sass --watch to the arguments because that happens implicitly via the Intellij watcher.
But lets say you have a directory structure like so...
-C
-path
-to
-css
styles.css
-sass
styles.scss
You would do something like this in Arguments:
--no-cache --update C:\path\to\css\sass:C:\path\to\css
And then set your working directory to C:\path\to\css\sass
Example:
Related
I have a style.sass file that #uses several _*.sass partials. That was all working fine. Now I added a _*.scss file (it just contains a map, so I wanted it to be multiline), but editing that file does not trigger a rebuild of the style.sass file. I tried adding a SCSS file watcher too, since I'm not sure how IntelliJ decides what to watch, but that didn't help.
It works fine using Dart-SASS's --watch argument. How do I make IntelliJ do the same?
(Although it's a Play project, I'm using IntelliJ's file watchers because I wanted to be able to use #use, so I needed Dart SASS.)
The watcher can only listen to changes in files of same type (either SASS or SCSS), depending on the watcher settings, so you can't make the watcher work for both .scss and .sass files at the same time unless you use a custom scope with both .sass and .scss files included and set File Type: to Any:
I have an UglifyJS file watcher set up in IntelliJ IDEA, and it works great while I'm editing -- I modify the source js, the minified version gets created next to it automatically.
However, when I run an Ant build, and it copies the minified versions into the build working dir, the watcher "helpfully" creates doubly minified versions of them (*.min.min.js) in the build working dir, not ok.
I've set the Scope of the watcher to the 'src' module, but apparently that doesn't do what you'd think it would, because the doubles get created when Ant copies files into the 'build' module. Happens when I use IDEA to manually copy a single file from src to build too.
I don't see how to set this up to include *.js but exclude *.min.js, which is really the right thing. (Seems so sensible that Uglify should have it built in, but far as I can see it doesn't.)
Other than getting rid of the watcher and scripting the build do the minification, or copying only the original js versions and letting the watcher (re)create the minified ones, what's the best way to go here?
Got this working, thanks to a helpful commenter on the IDEA forum. The key is setting up a custom Scope, which I tried to do before but failed.
Pattern I ended up with was this, for anyone with similar needs:
file[src]:*.js&&!file:*min.js*
Making the 'src' module current then opening the dlg and selecting it from the dropdown in the main watcher config window apparently doesn't actually filter by that module. Clicking the ... btn, then choosing it from the dlg that opens does, plus I added an explicit filename pattern to exclude already minified files too.
Works great now, far as I've tested (both a minimal Ant test and manually copying a file to 'build' in IDEA).
This is an old question, and perhaps the Watchers didn't have this functionality at the time.
Using JetBrains 'macro' codes makes the 'min.min.min.js' problem go away.
$FileNameWithoutAllExtensions$.js -m --source-map -o $ContentRoot$\prod\js\$FileNameWithoutAllExtensions$.min.js
I always set 'Scope' to 'Current File', too; why run uglify on files that haven't been altered? (I'm assuming that any 3rd party JS libraries are already minified).
Bottom line I need lessc to compile my main.less file to $CATALINA_EC_TMP/main.css
I'm working on this project, where I need to generate multiple output css files originating from the same source (LESS file) using LESSC.
So with Jet Brain's (WebStorm or IntelliJ Idea) File Watcher, I don't get much of options to save the output files to a custom path using an environment variable.
The reason why I use an environment variable is because some of the outputted files is in a temporary path (it changes whenever I deploy with ant)
That said ...
This is my Environment Variable:
$CATALINA_EC_TMP = '/foo/bar/'
and it's changing so in the next deployment, it won't be /foo/bar/ anymore.
and this is the command line that's being executed by my IDE to compile less files
/usr/local/bin/lessc --no-color main.less
I need lessc to compile my main.less file to $CATALINA_EC_TMP/main.css
so the resulting file would be in that case /foo/bar/main.css or wherever the $CATALINA_EC_TMP value is.
I hope that there's a solution to this, anyway if it doesn't exist I think I'll use fswatcher to copy my generated css files into my destinations whenever I compile.
Does anyone know how to setup WebStorm to work with CodeKit on a mac?
The ultimate goal is to get codekit to run and compile the my scss when a file is saved in WebStorm.
May be I have miss understood your question but, webstorm can compile your scss files automatically whenever you change them. Why do you need codekit to run?
I was looking for the same answer. From my initial test, I had both CodeKit and Webstorm open together. When I had Webstorm compile the SCSS it produced the map file which helps debug the SCSS files and changed the scss in CodeKit. Whereas codekit does not produce the map but produces a config file. I guess that it depends on who else needs to work with your code.
I am working on a huge project where i am using Java, TypeScript, Jade and Less.
To compile the project, i am using Maven (Java) + Grunt( TS, Jade, LESS). Grunt is called from maven, because maven drives whole project (include backend). With grunt everthing works perfect, but i want to have realtime compilation in idea, on ctrl+s command of frontend. I am using FileWatchers plugin for that, but there is a problem.
My html page is referencing to bundle.js file, that is compile over grunt. All TypeScript files are compiled to JS files and bundle.js file. Problem is, that i am not able to compile bundle.js realtime. I have tried to set an argument to tsc. Sth like
tsc -out bundle.js "**/*.ts"
Problem is, that tsc doesnt support regular expression. I have found some solution, but all of them requires some definition of files, that need to be done by external tool and werent automatic.
I dont want to the this options :
tsc -out bundle.js #FileWithTSFiles.txt
tsc -out bundle.js main.ts hello.ts helloWorld.ts
One more solution is propably possible, but don't know all necessary informations. I have got an idea to use FileWatchers plugin this way (like an argument write sth like)
tsc -out bundle.js $MacroToListAllFilesInProject$
because some macros are available here. Problem is, that i need to define custom macro to list the files, and i am not able to find the place to do that.
Same problem with LESS Files.
Grunt( TS, Jade, LESS).
If you are using grunt-ts simply use a target like :
dev: {
src: ['./**/*.ts'],
out: './bundle.js',
},
Reference : https://github.com/grunt-ts/grunt-ts
I'd like to point out that when using --out you should use a reference file to determine the order of the generated javascript https://github.com/grunt-ts/grunt-ts#javascript-generation-and-ordering