gulp-compass Gulp-compass compressing sass not working

Running Sass 3.4.3, Compass 1.0.1, Gulp 3.8.8 and Gulp-compass 1.3.1

var gulp = require('gulp');
var compass = require('gulp-compass');
var gutil = require('gulp-util');

 gulp.task('compass', function() {
        gulp.src('comp/sass/style.scss')
            .pipe(compass({
                sass: 'comp/sass',
                image: 'dev/theme/images',
                style: 'compressed'
            })
            .on('error', gutil.log))
            .pipe(gulp.dest('dev/theme/css'))
    });

compass Task is compiling the sass but compression is not working. It output a normal uncompressed css file.

Sep 13 '14 04:09 avinvarghese

@avinvarghese Why closed this issue?

Sep 15 '14 10:09 appleboy

@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.

Sep 16 '14 02:09 avinvarghese

@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.

Sep 16 '14 02:09 avinvarghese

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

Sep 16 '14 03:09 appleboy

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

Oct 02 '14 12:10 appleboy

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?

Mar 01 '15 00:03 koenpeters

@koenpeters Do you provide detail of gulp compass config?

Mar 01 '15 15:03 appleboy

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

Mar 01 '15 15:03 appleboy

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?

Mar 01 '15 19:03 koenpeters

Hi @appleboy,

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

Mar 03 '15 12:03 koenpeters

Hi @koenpeters

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

Mar 03 '15 14:03 appleboy

Okay, Thanks a bunch!

Mar 03 '15 14:03 koenpeters

Hello there,

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

May 30 '15 01:05 Durdona

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" }

May 30 '15 01:05 Durdona

Hello,

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

Stephen

Jun 05 '15 15:06 anartfulscience

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

Mar 03 '16 16:03 michelecocuccio

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 !

Mar 14 '16 16:03 lowtrux

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

Mar 22 '16 20:03 lipho

Hello,

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

Jul 09 '16 23:07 kaluki

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

Apr 06 '17 08:04 5argon

::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

May 03 '17 16:05 imgnx

@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.

Oct 20 '17 00:10 randy-emu

@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 :)

Dec 01 '17 21:12 K-JAX