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

[eylon-uk]

Hi

I have originally submitted this case as a comment to a similar issue (#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" }