Can't process the output of the gulp-compass task.

[jannisg]

I'm trying to get the gulp-compass version 1.0.1 into my gulp build stream but am having issues working with the output of the compass compiler.

Here is the gulp task I've got which should:

1. Find all .scss files.
2. Process with compass
3. Run autoprefixer over the resulting css
4. Write to .css file
5. Trigger livereload
6. Output the .css filesize to console.

gulp.task('styles', function() {
  gulp
    .src('assets/scss/**.scss')
    .pipe( tasks.compass( { config_file: './config.rb' } ) )
    .pipe( tasks.autoprefixer( 'last 2 versions', 'ie 8' ) )
    .pipe( gulp.dest('assets/css') )
    .pipe( tasks.livereload(server) )
    .pipe( tasks.filesize() );
});

The issue I'm experiencing is that after .pipe( tasks.compass( { opts } ) ) has run, autoprefixer does not trigger, nor does the livereload or filesize tasks. The compass output does however get written to the .css file as desired.

Note: Livereload by itself is working, coffeescripts are successfully compiled and the livereload is triggered so the module in itself is working.

Any ideas would be much appreciated.

[yocontra]

The code for this module is confusing... The file object is never actually being manipulated - it runs compass on the file contents but doesn't use the output at all. Very strange.

[jannisg]

Aha! Thanks for the pointer, I managed to work around this oddity for now using 2 separate tasks as follows.

In task 1, I purely compile the scss to css using compass and setting the compass css_dir to a .tmp folder. Then in task 2, I gulp.src the .tmp files and work with them, writing the output back into the actual assets/css folder.

Not particular nice or clean, but it does seem to work for now.

// Work with our SCSS files.
gulp.task('compass', function() {
  gulp
    .src('assets/scss/**.scss')
    .pipe( tasks.compass( { config_file: './config.rb' } ) )
    .pipe( gulp.dest('.tmp') );
});

// Add vendor prefixes to our generated CSS file.
gulp.task('autoprefixer', function() {
  gulp
    .src('.tmp/**/*.css')
    .pipe( tasks.autoprefixer( 'last 2 versions', 'ie 8' ) )
    .pipe( gulp.dest('.') )
    .pipe( tasks.livereload(server) )
    .pipe( tasks.filesize() );
});

And then in the livereload server task:

    gulp.watch('assets/scss/**',            function(e) { gulp.run('compass'); });
    gulp.watch('.tmp/**/*.css',             function(e) { gulp.run('autoprefixer'); });

[yocontra]

If this is writing to a tmp folder and not modifying the files in the stream its violating the plugin guidelines

[appleboy]

Hi @jannisg,

Please update to version 1.0.2 and try it again.

Thanks.

[yocontra]

@appleboy Is there any way to prevent this from writing to disk? Plugins should not be writing this to disk - they should only be modifying the contents in memory and passing them along. The actual disk write happens in gulp.dest

[appleboy]

@Contra I try to find another way to prevent this from writing to disk, but the compass command is not support with displaying CSS result directly.

I will try to find another approach. Thanks.

[yocontra]

@appleboy I know it's not your fault https://github.com/nathggns/node-compass/issues/29

[appleboy]

@Contra I create issue on compass project. ref chriseppstein/compass/issues/1499

[sindresorhus]

This is exactly why I didn't create a gulp task for Compass. Compass is inherently "designed" as an awful (slow) config mess. I predict nothing will be done about this upstream. I created grunt-contrib-compass and still regret it.

[dmp42]

@appleboy I'm confused about what the remaining issues are here (apart from the suckiness of compass itself).

Is there a test-case I could use to reproduce the problem? Of master now the following is wfm (which I think fix the O.P. problem?):

gulp.src('src/**/*.{scss,css}')
  .pipe(compass({
      style: 'nested',
      sass: 'src',
      comments: true,
      logging: true
    }
  ))
  .pipe(map(function(file, cb){
    console.warn("This is triggered ->", file.path);
    console.warn(file.contents.toString('utf8'));
    cb(null, file);
  }));

Thanks!

[taai]

I have got an idea!

Currently the Compass does not provide an option to return the compiled CSS instead of writing it into the file...

The work-around:

1. Create a temporary directory (preferably in system's temp directory)
2. Force compass to build CSS there
3. Read the compiled CSS files into memory
4. Delete temporary files
5. Pipe files from memory

By the way, can we use compass watch to increase speed of compilation process (for watch tasks?

[sindresorhus]

@taai that's what gulp-ruby-sass does.

[taai]

@sindresorhus Great! I would like that with Compass too. By the way, can you tell me the difference between compass and sass --compass? The compass with all features is being used anyway, right? Or just the syntax?

[sindresorhus]

--compass flag enables the compass imports, but none of the conventions and settings.