gulp, compass, live reload & partials reloads

Question

So, I'm using gulp in my project.

I use gulp-compass to compile my assets.

And, one of the task I have is a watch task for dev. like this:

gulp.task('live', function() {
  gulp.watch('path/to/my/scss/files', function(event) {
    console.log('Event type: ' + event.type);
    console.log('Event path: ' + event.path);
    compass(event.path);
  });
});

The compass function:

function compass(source) {
  return gulp.src(source)
    .pipe(
      plugins.compass({
        config_file: 'config.rb',
        css: 'path/to/my/css/files',
        sass: 'path/to/my/scss/files'
      }).on('error', errorHandler)
    )
    .pipe(gulp.dest('../web/css'))
    .pipe(plugins.livereload());
}

Note: the errorHandler function is irrelevant on my question.

The reason I watch files this way is in order to make gulp-compass not compile all files, but the one that have been changed (I use this for dev, so I will be working in one file at time), this way the refresh is fast, and I don't have to wait (typically, around 30 ~ 60 seconds in compile all scss). gulp-compass only perform compile, not watch.

This works perfect when I'm working on a not partial file (ie: home.scss).

But if I change something on a partial, that gets included on the main scss, things goes wrong: it will compile my partial, and that is, it doesn't refresh (I guess its try to refresh a partial, no sense).

In order to make that happen, I have to do a dummy modification on the parent scss file, and the it works.

I know this is due to the way I have define my taks (only send to compass one file at the time), and also due to gulp-compass perform always "compile".

This gulp-plugin (so far) does not have the watch command (unless I patch it, and I don't want to do that).

Does someone knows how to solve this situation and when I change something in a partial, "he knows" that this partials belong to a certain parent and then refresh it ?

So far, I can do the dummy modification on the parent or watch explicitly the parent scss Im working on, but would love to have this automatic.

I think one solution could be create a map with all parents of the partial (reading files directly) and in case a partial is modify, update all parents and refresh, but maybe thats "too expensive". Maybe this can be some sort of "warm-up"...

Does someone have the same problem ? How you work with partials and a watch / live-reload environment ?

The goal of all this is to write code and have my browser updates, so I can see in real time my advances and prevent cross browser problems (few browsers open at the same time and being refreshing dynamically).

Any suggestion / help will be appreciate !

Answer 1

I couldn't solve this issue.

We dropped compass, as it is no longer needed for our needs.

We are now using node-sass, and sometime bootstrap, some times post css, etc, etc...