Adding Compass to gulpfile.js

sage
1

hi there,
I’ve purchased all of your available screencasts and have a question about adding compass to my gulpfile.js.

I need to add the following code in order to compile the compass written in my sass files. I’ve tried copying it directly into my gulpfile.js. However, I’m fairly certain it needs to be hooked in somehow…just don’t know how to go about doing so…as I’m somewhat of a novice programmer.

var compass = require('gulp-compass'),
  minifyCSS = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      css: 'app/assets/css',
      sass: 'app/assets/sass',
      image: 'app/assets/images'
    }))
    .pipe(minifyCSS())
    .pipe(gulp.dest('app/assets/temp'));
});

Thanks in advance for your assistance and THANKS for pushing WP into the future! :smile:
You guys ROCK!!!

1 Like
2

This should be what you need:

var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return $.if(!enabled.failStyleTask, $.plumber());
    })
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.init());
    })
      .pipe(function() {
        return $.if('*.less', $.less());
      })
      .pipe(function() {
        return $.if('*.scss', $.ruby-sass({
          precision: 10,
          compass: true
        }));
      })
      .pipe($.concat, filename)
      .pipe($.pleeease, {
        autoprefixer: {
          browsers: [
            'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
            'opera 12'
          ]
        }
      })
    .pipe(function() {
      return $.if(enabled.rev, $.rev());
    })
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.write('.'));
    })();
};

This requires gulp-ruby-sass to be installed so npm install --save gulp-ruby-sass. You also have to bring your own config.rb and install compass on your machine.

3

Hi @deschet,

Austins solution will work but you don’t have to sacrifice the speed of node just to use compass, in fact you don’t need ruby atall.

First off you just need to install the NPM compass-mixins package.

npm install compass-mixins --save-dev

Then you will need to add a extra line to your gulpfile.js

var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return $.if(!enabled.failStyleTask, $.plumber());
    })
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.init());
    })
      .pipe(function() {
        return $.if('*.less', $.less());
      })
      .pipe(function() {
        return $.if('*.scss', $.sass({
          outputStyle: 'nested', // libsass doesn't support expanded yet
          includePaths: [
		   './node_modules/compass-mixins/lib' // Add this bit just here =D
		  ],
          precision: 10,
          errLogToConsole: !enabled.failStyleTask
        }));
      })
      .pipe($.concat, filename)
      .pipe($.pleeease, {
          browsers: [
            'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
            'opera 12'
          ],
          minifier: argv.production,
      })
    .pipe(function() {
      return $.if(enabled.rev, $.rev());
    })
    .pipe(function() {
      return $.if(enabled.maps, $.sourcemaps.write('.'));
    })();
};

And there you go, you can now use Compass mixins in your sass files just as you did previously but without Ruby or the slooowwww that comes with it.

Just add @import “compass”; to the top of your sass file and your all set.

I use the exact same process to add suzy to the mix for snazzy grid logic.

8 Likes
4

@austin - Thank you for the speedy response! However, whatever reason I wasn’t able to make your solution work. I spent a few hours trying last night with no success. Maybe I was putting the config.rb in the incorrect directory or possibly I didn’t have my paths set correctly in it or maybe I didn’t initialize a compass project correctly. Either way, I wasn’t able to get it working but thank you again for sharing.

@drew - your solution WORKED PERFECTLY! :slight_smile: It was exactly what I was looking for and doing so without sacrificing speed. Also, would you mind sharing how you added suzy to your gulpfile.js? Currently , I’m using Bootstrap for my grid system. However, it just doesn’t feel right having my styling mixed in with my content.

Again, THANKS SO MUCH!

5

Hi @deschet glad you found this useful. Sage is a great starter theme and I hate bloating it down with extra styling and grid provision I’ll never use, so compass and suzy logic for a big part of what we use here day to day.

Installing suzy is just as simple thanks to npm

npm install susy --save-dev

Then you just need to add in an additional dependancy to your scss pipe

'./node_modules/susy/sass'

And as before reference susy at the top of your sass stylesheet @import “susy”;

One tiny proviso when using suzy is that node sass can’t currently process fractions in the following format 1/3 so in order to get things building you’ll need to set your susy defaults with fractions in a decimal format IE

$susy: (
	math: static,
	columns: 12,
	column-width: 60px,
	gutters: 0.33, 
);

Hope that helps ^-^

2 Likes
6

I really like using http://neat.bourbon.io/

1 Like
7

@drew do you have any idea how to get this working with compass sprites? I am getting either:

[gulp-sass] file to import not found or unreadable
If I use *.png

or

[gulp-sass] invalid top-level expression on line 1
If I type specific file names

Is it maybe trying to interpret images as sass files?

8

Consider using a dedicated sprite creation module such as https://github.com/aslansky/css-sprite. Works great for me. Haven’t used compass in ages.

1 Like
9

@austin I tried your solution, but I got "Error: Invalid call to lazypipe().pipe(): no stream creation function specified"
I also tried your complete gulpfile.js with all requirements - same output. Any idea? :slight_smile:

10

Thanks for the tip, Austin.

11

thanks man you save my day.