optimise gulp Sass compiling

Question

I have next situation. I have core.scss file:

@import "fonts";
@import "custom_mixins";
@import "variables";
@import "base";

where I generally add all subfiles into one central. Next with compass and gulp I compile this file:

gulp.task('compass', function() {
    return gulp.src('css/src/core.scss')
        .pipe(compass({
            config_file: './config.rb',
            css: 'css/dist',
            sass: 'css/src'
        }));
});

It works fine but here I have the problem. Each time I change for example one line in _variables.scss, this task recompiles all files to core.css file. It takes near 2s for one line change. Is there any way I can cache unchaged scss subfiles so that they wont be recompiled each time? I know there is an option in Gulp using gulp-remember plugin to remember compiled unchanged css files before concatenating them. But here I have one css file created from one scss file...

Answer 1

I recommend you to use gulp-sass instead of compass. Compass is just a bunch of mixins and functions you can yourself integrate in your files without the need to compass dependency. Gulp-sass is faster than the sass compilation with Ruby because is using libsass, a port of Sass in C++.

First you'll need to install node-sass with NPM or Yarn and call it in your Gulpfile.

var gulp = require('gulp');
var sass = require('gulp-sass');

You'll change your compass task to the sass version:

gulp.task('sass', function() {
  return gulp.src('css/src/core.scss')
    .pipe(sass({
      outputStyle: 'nested'
    }).on('error', sass.logError))
    .pipe(gulp.dest('css/dist')
});

Try, your compilation will probably be faster. You can change sass options, add sourcemaps and others options.