Much slower than standard compass command

[melwas]

Hi!

I tried to use gulp-compass, but it is so much slower than invoking compass compile or compass watch. Regular compass compile takes no more than 0.5 sec to compile all the files, with gulp-compass it takes even few seconds.

My task:

gulp.task('compass', function() {
  return gulp.src(SASS_FILES_PATTERN)
    .pipe(compass({
        config_file: path.join(ROOT_PATH, 'config.rb'),
        css: 'css',
        sass: 'sass',
        project: ROOT_PATH,
    }));
});

What could be wrong with this configuration?

[finteractive]

I'm seeing about 0.25s extra in gulp-compass, but not many seconds more as you described.

I used bundler for compass so that may be different, but perhaps take a look at all the default settings with defaults set= true used with gulp-compass (comments, etc) and make sure to set them to false to get an apples-to-apple comparison of gulp-compass vs native performance.

I'm a gulp nube but for some reason I noticed my config.rb settings don't all get passed to gulp-compass so if you're got anything in there special then try setting those as config variables in gulp.

[mrpavlikov]

I experience performance issue as well. Especially on large projects. Especially if you @include compass.

[appleboy]

Hi all,

Please try 2.0.0 version.

[Paul-PSDigital]

I'm on 2.0.1 with a large project (multiple modules) - seeing much slower performance than with grunt-compass-contrib (<1s compared to ~10s)

[cheton]

I found this line in lib/compass.js:

  var child = spawn(compassExecutable, options, {cwd: opts.project || process.cwd()}),

It spawns a new child process per file, and therefore results in performance degradation.

However, in grunt-contrib-compass, it calls compass only once with options like this:

$ compass compile --force 
    --sass-dir=web 
    --css-dir=web 
    --images-dir=web/images 
    --javascripts-dir=web 
    --environment=development 
    --output-style=expanded
    --relative-assets
    --trace
    --time

All files are processed at once. That's the reason why gulp-compass is much slower than grunt-contrib-compass.

[red2678]

Any more on this? I am using ver 2.0 and I am seeing 10 seconds to process a relatively small project (4 files with maybe 100 lines each).

[cheton]

Hi @red2678

I'd recommend you to use gulp-sass and node-bourbon as an alternative solution.

var gulp = require('gulp');
var bourbon = require('node-bourbon');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

var sassConfig = {
    src: ['web/**/*.{sass,scss}'],
    dest: 'web/',
    options: {
        includePaths: require('node-bourbon').includePaths,
        outputStyle: 'nested'
    }
};

gulp.task('sass', function() {
    return gulp.src(sassConfig.src)
        .pipe(sourcemaps.init())
            .pipe(sass(sassConfig.options))
        .pipe(sourcemaps.write('/', {includeContent: false}))
        .pipe(gulp.dest(sassConfig.dest));
});

[red2678]

Thanks @cheton :+1: I unfortunately had to revert to gulp-sass. Too bad because I love compass, but as I started to dev more yesterday, the aforementioned 10 seconds was getting up to 14+. I will check out gulp-bourbon, thanks!

[cheton]

@red2678 You could also use gulp-spawn to spawn a child process to run compass command with options like --sass-dir and --images-dir to include all your files/directories.

An example usage for compass might look liks this:

compass compile --force 
    --sass-dir=web 
    --css-dir=web 
    --images-dir=web/images 
    --javascripts-dir=web 
    --environment=development 
    --output-style=expanded
    --relative-assets
    --trace
    --time

It should significantly save your time!

[appleboy]

2.0.4 support watch mode.

[fterrier]

+1 for this

[oddurs]

In case it's unclear to anyone how to implement watching, in v2.0.4 you can set up your gulp-compass configuration object to take in the key pair task: "watch" (see the bottom of the README).

.pipe(compass({
    // the rest of your configuration here
    task: "watch"
}))

This watches for changes and only runs the process on the relevant file.

[star-szr]

Thank you @oddurs, it was unclear to me. Refactoring to use that makes things noticeably faster for me since as you said it only runs the process on the relevant file, not all files.

[El4a]

Adding the watch task doesn't help me: now the compass task doesn't "finish" and doesn't conclude the runsequence and therefore gulp serve isn't triggered anymore (I think)

Here it does everything between brackets, but doesn't run site task anymore gulp.task('default', ['clean'], function (done) { runSequence(['index', 'copy', 'scripts:huisstijl', 'scripts:angular', 'compass:huisstijl', 'compass:other', 'stats'], 'site', done); });

And here, because not everything in the default task gets finished it doesn't run serve... gulp.task('serve', ['default', 'lint'], function () { browserSync.init({ notify: true, server: { baseDir: ['dist'], middleware: [ modRewrite([ '^/huisstijl(.*) /$1 [L]' ]) ] } });

I have a large project and I'm at 21seconds to compile... obviously impossible to work with.

EDIT: I have managed to get rid of compass and susy by following this helpful article http://jim-nielsen.com/blog/2017/migrating-away-from-compass-and-susy/ and installing "breakpoint-sass" (not "sass-breakpoint, for the love of god! wail of despair) because I was also using breakpoint plugin with compass. It's a lot of manual work (replacing all the mixins) but it was worth it: compiling with just the gulp-sass plugin instead got me down to 2.29s!