File Watcher for compass in PHPStorm / Webstorm

I love Jetbrains PHPStorm, it’s the best IDE out there in my opinion. The latest version 6.0 released recently included “File Watchers – for easy Sass, LESS, SCSS, CoffeeScript, TypeScript transpilation”. The SCSS file watcher almost works with compass projects but when you start including like ‘@import “compass/reset”;’ you get errors because the compass/reset stylesheet isn’t actually in your project, it’s located centrally here /Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass.

So here’s how to get compass SASS files auto compiling.
Screen Shot 2013-03-22 at 13.51.08
Here is the xml config if you want to paste it into .idea/watcherTasks.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectTasksOptions">
    <TaskOptions isEnabled="true">
      <option name="arguments" value="compile $FileParentDir$" />
      <option name="checkSyntaxErrors" value="true" />
      <option name="description" value="Compiles .scss files into .css files" />
      <option name="exitCodeBehavior" value="ERROR" />
      <option name="fileExtension" value="scss" />
      <option name="immediateSync" value="true" />
      <option name="name" value="Compass" />
      <option name="output" value="" />
      <option name="outputFilters">
        <array />
      </option>
      <option name="outputFromStdout" value="false" />
      <option name="passParentEnvs" value="true" />
      <option name="program" value="/usr/bin/compass" />
      <option name="scopeName" value="Project Files" />
      <option name="trackOnlyRoot" value="true" />
      <option name="workingDir" value="$Projectpath$" />
      <envs />
    </TaskOptions>
  </component>
</project>
This entry was posted in Uncategorized. Bookmark the permalink.

11 Responses to File Watcher for compass in PHPStorm / Webstorm

  1. smoothify says:

    Thanks for this, it works nicely for me. :)

    I turned off the ‘Immediate file synchronization’ option as otherwise it compiles for every single change you make to the file.

    Now for me it just compiles when saving the file and avoids the distracting flash of the run output pane triggering so oftem.

    One thing it took me a while to notice is that the output css file doesn’t seem to update in realtime, i had to reload it or collapse and expand the folder tree to see the output changes. Of course, you don’t need to look at the output often, it’s just when testing this out I wasn’t sure if it was working at first.

    • Stu says:

      Yes the PHPStorm file system isn’t always in sync. A right click on any file and ‘Synchronize’ will address this. I agree it’s not ideal if you’re spending a lot of time looking at the way SASS is specifically handling something. I’d suggest getting the CSS in question in a browser and refreshing there if you’re doing a lot of checks.

  2. Pascal says:

    Thanks for figuring this out!

  3. Adrian Barsby says:

    It works pretty much the same in windows except you will probably find your compass file in your Ruby\bin folder. e.g. for me the Program entry looks like C:\Ruby193\bin\compass.bat

    I personally use a ruby config.rb file in my project root, so use watch $ProjectFileDir$ in the Arguments entry and nothing in Working Directory.

    It all works perfectly.

    • Martijn Senden says:

      I tried your settings in Webstorm on Windows, but for me the compass imports still do not work.

      C:/Ruby193/bin/compass.bat watch D:\Project
      >>> Compass is watching for changes. Press Ctrl-C to Stop.
      Errno::ENOENT on line ["346"] of C: No such file or directory - D:/Project/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058%092Ruby193%092lib%092ruby%092gems%0921.9.1%092gems%092compass-core-1.0.0.alpha.19%092stylesheets%092compass%092_support.scssc20140326-1296-mn1wvh.lock
      Run with --trace to see the full backtrace
      LoadError on line ["36"] of C: cannot load such file -- wdm
      Run with --trace to see the full backtrace

      Maybe I missed something. I have this set up:
      Program: C:\Ruby193\bin\compass.bat
      Arguments: watch $ProjectFileDir$
      Working directory:
      Environment variables:
      Output paths to refresh: $ProjectFileDir$

      • Stu says:

        I think it’s because you are using watch and not compile. The File Watchers feature in PHPStorm is taking care of the ‘watching’ side of things. To help debug this I would drop to the command line and in the location of your config.rb try a ‘compass compile’.

      • Martijn Senden says:

        I installed wdm, so now, I only get this error:

        C:/Ruby193/bin/compass.bat watch D:/Project
        >>> Compass is watching for changes. Press Ctrl-C to Stop.
        Errno::ENOENT on line ["346"] of C: No such file or directory - D:/Project/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058%092Ruby193%092lib%092ruby%092gems%0921.9.1%092gems%092compass-core-1.0.0.alpha.19%092stylesheets%092compass%092_support.scssc20140326-2696-x4a9jf.lock
        Run with --trace to see the full backtrace

        • Stu says:

          Hi I’m not sure what WDM is. As I say I think compile rather than watch is the way to go.

          • Martijn Senden says:

            Thanks for the replies. I tired your suggestion and the compass compile command gives the same error as the watch did. I also did compass compile --trace, but couldn’t really make anything of the output:
            Errno::ENOENT on line ["346"] of C: No such file or directory - D:/Project/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058%092Ruby193%092lib%092ruby%092g
            ems%0921.9.1%092gems%092compass-core-1.0.0.alpha.19%092stylesheets%092compass%092_support.scssc20140326-3052-1x4nxgw.lock
            C:/Ruby193/lib/ruby/1.9.1/tempfile.rb:346:in `rmdir'
            C:/Ruby193/lib/ruby/1.9.1/tempfile.rb:338:in `ensure in locking'
            C:/Ruby193/lib/ruby/1.9.1/tempfile.rb:338:in `locking'
            C:/Ruby193/lib/ruby/1.9.1/tempfile.rb:144:in `block in initialize'
            C:/Ruby193/lib/ruby/1.9.1/tmpdir.rb:133:in `create'
            C:/Ruby193/lib/ruby/1.9.1/tempfile.rb:134:in `initialize'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/util.rb:1160:in `new'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/util.rb:1160:in `atomic_create_and_write_file'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/cache_stores/filesystem.rb:39:in `_store'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/cache_stores/base.rb:51:in `store'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/cache_stores/chain.rb:19:in `block in store'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/cache_stores/chain.rb:19:in `each'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/cache_stores/chain.rb:19:in `store'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/engine.rb:420:in `_to_tree'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/engine.rb:305:in `to_tree'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:295:in `block in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `block in with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:294:in `visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `block in with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block (2 levels) in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `map'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `block in with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:294:in `visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `block in with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block (2 levels) in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `map'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `block in with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:294:in `visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `block in with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block (2 levels) in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `map'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `block in with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:294:in `visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `block in with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block (2 levels) in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `map'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:297:in `block in visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `block in with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:88:in `with_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:294:in `visit_import'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `block in with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:121:in `with_frame'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/stack.rb:79:in `with_base'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:152:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:52:in `map'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:52:in `visit_children'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:161:in `block in visit_children'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:173:in `with_environment'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:160:in `visit_children'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `block in visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:180:in `visit_root'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/base.rb:36:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:151:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/visitors/perform.rb:8:in `visit'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/root_node.rb:36:in `css_tree'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/tree/root_node.rb:20:in `render'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/sass-3.3.4/lib/sass/engine.rb:274:in `render'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-import-once-1.0.4/lib/compass/import-once/engine.rb:17:in `block in render'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-import-once-1.0.4/lib/compass/import-once/engine.rb:29:in `with_import_scope'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-import-once-1.0.4/lib/compass/import-once/engine.rb:16:in `render'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:171:in `block (2 levels) in compile'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:153:in `timed'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:166:in `block in compile'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/logger.rb:46:in `red'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:165:in `compile'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:144:in `compile_if_required'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:129:in `block (2 levels) in run'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:127:in `each'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:127:in `block in run'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:153:in `timed'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/compiler.rb:126:in `run'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/commands/update_project.rb:49:in `perform'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/commands/base.rb:18:in `execute'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/commands/project_base.rb:19:in `execute'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/lib/compass/exec/sub_command_ui.rb:15:in `run!'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/bin/compass:30:in `block in '
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/bin/compass:44:in `call'
            C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-1.0.0.alpha.19/bin/compass:44:in `'
            C:/Ruby193/bin/compass:23:in `load'
            C:/Ruby193/bin/compass:23:in `'

            I think it may have something to do with the webstorm cache? I have seen –no-cache options in the arguments field, but this doesn’t seem to help either…. I’m kind of at a loss here.

          • Stu says:

            Are you running compass compile in the same location as your config.rb?

  4. Pingback: Grunt as a file watcher in PHP/Webstorm | Caracal Digital

Leave a Reply

Your email address will not be published. Required fields are marked *


four + = 10

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>