gulp-compass ignores gulpfile and does not update css folders when they're changed

Hi

I have originally submitted this case as a comment to a similar issue (https://github.com/appleboy/gulp-compass/issues/112) but it might be better to open a new one:

I'm new to gulp and compass so I might have done something wrong but trying to configure a gulp workflow I've encountered a problem - the changes that I make in the sass file gets updated only in the upper css folder (see the project structure below) but not in the builds folder to which I'm referring as .dest in the gulpfile. I'd appreciate very much any assistance in fixing it.
## This my project structure:

Project/
----Builds
---------Development
--------------Css (**do not get updated**)
--------------Js
--------------Images
---------Production
--------------Css (**do not get updated**)
--------------Js
----Components
---------Sass
---------Scripts
----Css (**gets updated**)
## My gulpfile.js:

`var gulp = require('gulp'),
gulpUtil = require('gulp-util'),
gulpConcat = require('gulp-concat'),
gulpBrowserify = require('gulp-browserify'),
gulpCompass = require('gulp-compass'),
connect = require('gulp-connect');

var env,
jsSources,
sassSources,
htmlSources,
jsonSources,
outputDir,
sassStyle;

env = process.env.NODE_ENV || 'development';

if (env==='Development') {
outputDir = 'Builds/Development/';
sassStyle = 'expanded';
} else {
outputDir = 'Builds/Production/';
sassStyle = 'compressed';
}

jsSources = [
'Components/Scripts/guzi1.js',
'Components/Scripts/guzi_mustache.js'
];
sassSources = ['Components/Sass/style.scss'];
htmlSources = [outputDir + '.html'];
jsonSources = [outputDir + 'js/.json'];

gulp.task('js', function () {
gulp.src(jsSources)
.pipe(gulpConcat('guzi_master.js'))
.pipe(gulpBrowserify())
.pipe(gulp.dest(outputDir + 'js'))
.pipe(connect.reload())
});

gulp.task('html', function () {
gulp.src(htmlSources)
.pipe(connect.reload())
});

gulp.task('json', function () {
gulp.src(jsonSources)
.pipe(connect.reload())
});

gulp.task('compass', function () {
gulp.src(sassSources)
.pipe(gulpCompass({
sass: 'Components/Sass',
image: outputDir + 'images',
style: sassStyle
})
.on('error', gulpUtil.log))
.pipe(gulp.dest(outputDir + 'css'))
.pipe(connect.reload())
});

gulp.task('watch', function () {
gulp.watch(jsSources, ['js']);
gulp.watch('Components/Sass/*.scss', ['compass']);
gulp.watch(htmlSources, ['html']);
gulp.watch(jsonSources, ['json'] );
});

gulp.task('connect', function () {
connect.server({
root: outputDir,
livereload: true
});
});

gulp.task('default', ['html', 'json', 'js', 'compass', 'watch', 'connect']);`
## My package.json:

{ "name": "guzi", "version": "0.0.1", "description": "Guzi's website", "main": "index.js", "repository": { "type": "git", "url": "?.git" }, "author": "eylon", "devDependencies": { "compass": "^0.1.1", "gulp": "^3.9.1", "gulp-browserify": "^0.5.1", "gulp-compass": "^2.1.0", "gulp-concat": "^2.6.0", "gulp-connect": "^3.2.2", "gulp-ruby-sass": "^2.0.6", "gulp-util": "^3.0.7", "jquery": "^2.2.3", "mustache": "^2.2.1" }, "license": "MIT" }

Start with the gulpfile.js compass and watch tasks, using the package versions in package.json to reproduce the workflow. Change Components/Sass/style.scss and compare the CSS written to Css with the expected Builds/Development/css or Builds/Production/css output. Done means watched Sass changes update the configured destination folders as well.

Written by the indexing model from the issue text.