Gulp-compass compressing sass not working about gulp-compass HOT 23 OPEN

Hello,

I had the same issue until I added @import "compass" to my root scss file.

from gulp-compass.

@avinvarghese Why closed this issue?

from gulp-compass.

@appleboy FIrst posted this problem on http://stackoverflow.com/q/25808128/1256403 but didn't get a solution. I was trying to Load config without config.rb. After that i decided to inform this as an Issue in official Repo. I thought you were ignoring this.

from gulp-compass.

@appleboy Problem still exists. As a last try i tried to delete style.css created by style: 'expanded' version of config then it create a new compressed css file, but when i replace config back to style: 'expanded' and tried to run compass tack it is not generating or overwriting the current css file.

from gulp-compass.

@avinvarghese I will try Sass 3.4.3, Compass 1.0.1 version.

from gulp-compass.

@avinvarghese Do you try modify your style.scss again after you replace config back to style: expanded?

from gulp-compass.

I tried it with sass 3.4.13, compass 1.0.3 and gulp-compass 2.0.3 and I have the same issue. I read on stackoverflow that this issue might have a workaround by including a separate config.rb file, but that didn't work for me unfortunately.

When running with debug: true then this is logged:

gulp-compass: Running command: /usr/bin/compass compile /app /app/web/_dev/sass/product-overview.scss --no-line-comments --relative-assets --debug-info --sourcemap --output-style compressed --images-dir ./web/global/images --css-dir web/global/css --sass-dir web/_dev/sass

So the compressed parameter is actually sent to compass.

When I run this exact same command from the command line I DO get a compressed result.

Any ideas on what might be going wrong here?

from gulp-compass.

@koenpeters Do you provide detail of gulp compass config?

from gulp-compass.

and I will try sass 3.4.13, compass 1.0.3 and gulp-compass 2.0.3 again.

from gulp-compass.

Hey @appleboy,

This is what I used:

gulp.task('compass', function() {
  return gulp.src(compass_src)
      .pipe(plumber()) /* catches the errors so the process doesn't crash on watch*/
      .pipe(compass({
              style: 'compressed',
              image: './web/global/images',
              css: './web/global/css',
              sass: './web/_dev/sass',
              debug: true,
              sourcemap: true
      }))
      .pipe(combineMediaQueries({ log: true }))
      .pipe(gulp.dest(compass_dst));

});

Is this what you wanted to see?

from gulp-compass.

Hi @appleboy,

Have you had the chance to take a look? I can't seem to figure it out. ':/

from gulp-compass.

Hi @koenpeters

I will take it. Give me more time. Thanks.

from gulp-compass.

Okay, Thanks a bunch!

from gulp-compass.

Hello there,

I am having the same issue now ... Could someone find a solution ?

from gulp-compass.

Here is what I am using
"devDependencies": {
"gulp": "^3.8.11",
"gulp-browserify": "^0.5.1",
"gulp-coffee": "^2.3.1",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.5.2",
"gulp-util": "^3.0.4",
"jquery": "^2.1.4",
"mustache": "^2.0.0"
}

from gulp-compass.

Hello,

I'm having the same issue. If anyone finds a solution please let me know :)

Stephen

from gulp-compass.

Hello.
Same issue here. Anyone was able to solve it?

from gulp-compass.

Hi, i'm having the same issue here, Here's what i'm using :

"devDependencies": {
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-browserify": "^0.5.1",
"gulp-compass": "^2.1.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^3.1.0",
"gulp-connect-php": "0.0.7",
"gulp-if": "^2.0.0",
"gulp-jquery": "^1.1.2",
"gulp-jshint": "^2.0.0",
"gulp-sass": "^2.2.0",
"gulp-util": "^3.0.7",
"jshint": "^2.9.1"
}

Any chance somebody can help with this ? Many Thanks !

from gulp-compass.

I had the same issue and I used rvm to change my ruby version to 2.3.0 and reinstalled compass @ 2.3.0. That seemed to fix the problem.

edit: now I can't seem to get the other styles (expanded, nested) to work without a config.rb

from gulp-compass.

@kaluki Thanks, previously my project had @import "compass/css3" and it worked. Now it does not work because of the /css3 bit.

from gulp-compass.

::FIXED::

So, using style: 'compressed' doesn't work and MinifyCSS is no longer a working package. That's what's causing all of this confusion.
I ended up fixing this issue by using a config.rb file.

Here is what I tried:

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

Here is how my code looks in gulpfile.js now:

gulp.task('compass', function() {
	gulp.src(sassSources)
		.pipe(compass({
			config_file: './config.rb',
			css: 'components/css',
			sass: 'components/sass'
			// image: outputDir + 'images',
			// style: sassStyle
		})
		.on('error', gutil.log))
		.pipe(gulp.dest(outputDir + 'css'))
		.pipe(connect.reload())
});

Here is my config.rb file:

preferred_syntax = :sass
http_path = '/'
css_dir = 'components/css'
sass_dir = 'components/sass'
images_dir = 'components/images'
javascripts_dir = 'components/scripts'
relative_assets = true
line_comments = true
output_style = :compressed

And here's where I got the solution from: https://gist.github.com/nathansmith/1179395

from gulp-compass.

@internationalhouseofdonald having the "output_style = :compressed" in the config.rb does compress the css. Thank you for this solution. However, it would be nice to have it in the gulpfile.js directly.

from gulp-compass.

@randy-emu I agree. Here's a not-so-great solution that would work until somebody smarter than me comes along :)

Create "expanded-config.rb"

preferred_syntax = :sass
http_path = '/'
javascripts_dir = 'components/scripts'
relative_assets = true
line_comments = true
output_style = :expanded

Create "compressed-config.rb"

preferred_syntax = :sass
http_path = '/'
sass_dir = 'components/sass'
images_dir = 'components/images'
javascripts_dir = 'components/scripts'
relative_assets = true
line_comments = true
output_style = :compressed

Then in your gulpfile.js, create some conditional logic

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

if (env==='development') {
	outputDir = 'builds/development/';
	sassConfigStyle = 'expanded';
}	else {
	outputDir = 'builds/production/';
	sassConfigStyle = 'compressed';
}

... gulpfile.js compass task

gulp.task('compass', function() {
	gulp.src(sassSources)
		.pipe(compass({
			config_file: 'components/sass/'+ sassConfigStyle +'-config.rb',
			css: outputDir + 'css',
			sass: 'components/sass',
			image: outputDir + 'images',
		}))
		.on('error', gutil.log)
		.pipe(gulp.dest(outputDir + 'css'))
		.pipe(connect.reload())
});

And that works for me. But, please note that for some reason with this method, you can't overwrite the output style of the previously output css file. So you'll have to delete the file and re-output. Otherwise it seems to be a temporary solution :)

from gulp-compass.