Teaser image of Gulp Sass Grapher

Gulp Sass Grapher

eccentric-j/gulp-sass-grapher
  • JS

A gulp plugin to help graph sass imports based on sass-graph.

Goal

When creating the front-end build tooling for VenueBook we needed a smarter build system that would watch for changes to partial SASS files and only compile the root SASS files that imported them.

Process

  1. Study how node-sass’s watch command was implemented
  2. Find a library that could parse a sass file and return imports.
  3. Write software to keep a tree map of the relationships between all SASS files in our project.
  4. Leverage gulp watch stream to look up files in the tree to find their root parent files.

Discoveries

  • One of my first introductions to streams which is what lead me to functional programming.
  • Learned how to graph dependencies for quick lookups.
  • Gained experience writing complex front-end build pipelines from scratch.