Saturday, August 22, 2015

Cheap ExtJS 4.x SASS watcher (ready to be wrapped with gulp/grund or any other build tool)

ExtJS 4.x does't has reliable SASS watcher out of the box. Recommended approach of "compass watch" introduced in ExtJS 4.x doesn't works anymore in ExtJS 4.2 as it doesn't understand the structure of themes, leaving "sencha ant sass" as only option to build SASS, which is so slooooow and takes around 30-40 seconds to rebuild the whole theme.

By looking into "sencha --debug  ant sass" output, we can see that it does a lot:

  • loads all themes and determines overrides
  • loads all ExtJS classes and builds dependencies tree
  • performs SASS files lookup and builds [...]/build/glow-all-debug.scss
    [ file contains reference to all SASS files that should be compiled with compass and this step is essential if SASS files were added/removed ] 
  • calls bundled version of "compass" to build CSS files
  • minimizes the resulting CSS file with tool called "yuicompressor-*.jar"
All these steps are not necessarily important for quick SASS styles changes and calling the compass directly may be more that enough. 

We can't use our own compass install as Sencha Cmd has a bundled version of compass with its own themes specific plugins (bundled Ruby scripts).

We can call bundled compass version by:

joseph@host:~/myproj/packages/test$ GEM_HOME=$SENCHA_CMD_3_0_0/extensions/sencha-compass/gems GEM_PATH=$SENCHA_CMD_3_0_0/extensions/sencha-compass/gems ruby $SENCHA_CMD_3_0_0/extensions/sencha-compass/gems/bin/compass compile . --config ./config.rb --css-dir ./resources --sass-dir . --force --trace

SENCHA_CMD_3_0_0 variable should point to SenchaCmd installation, for ex. in my case:
$ echo $SENCHA_CMD_3_0_0

So you will have the resources/glow-all-debug.css file that can be then moved with gulp/grunt into for ex.  ../../../../build directory where it can be picked up by your application.

What we have now:
- SASS can be watched by gulp and rebuild automatically
- Rebuild takes 2-4 seconds instead of 40-60 seconds
- If files were added/removed you still need manual SenchaCmd rebuild with "sencha ant sass"