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.
Related
I have a less file main.less that #imports other less files so they can all be compiled into a single main.css file.
With Web Essentials 2013, saving any of the imported files would trigger a compile of the main.less - which isn't happening with this extension.
Is there a configuration I'm missing?
Right now I use Alt-Shift-y as a workaround to force compile all the less files.
I don't want to go with the grunt solution, described here
Do you have Web Workbench installed? That helped me, then it compiles automatically. https://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a
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).
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:
I use a CoffeeScript file watcher in IntelliJ to compile my CoffeeScript files. However, when I start the IDE, it does not interpret the files immediately. In the project structure, there are two files visible:
When I open the coffee file and change something, then the watcher is launched and compiles my script, which is also visible in the project structure:
Is there a way to tell IntelliJ that it should "precompile" all .coffee scripts in a project?
The problem is not only about the visibility of both .js and .coffee files. I want to store only .coffee files in the repository so initial compilation will be mandatory after the checkout.
I know I might use Grunt or even a coffee watcher to compile them, but my project involves a few really non-consoleable folks.
I'm currently using the OSX app LiveReload v2.1. It watches and compiles my HAML files just fine but for some reason it doesn't seem to compile my SASS files properly. It checks my SASS files - I know because it warns me of SASS related errors upon saving. It also creates the appropriate CSS files upon saving the SASS files however, when I open the CSS files they are completely blank.
I'm a bit of a SASS n00b but I'm just trying to get any basic styling to compile down to proper CSS. For example, the following:
body
background-color:blue
Any pointers on what I might be doing wrong would be much appreciated. Also, I should point out that I also manually installed the SASS gem, just in case, though that didn't seem to fix anything.
I figured it out. It didn't have to do with LiveReload at all, but instead how my SASS was formatted. There needed to be a space between the attribute and value. For example:
body
background-color:blue
Should have been:
body
background-color: blue
It would have been nice if SASS pointed this error out rather than simply spitting out an empty CSS file, oh well.