Gulp suddenly compiling extremely slowly

Question

Recently, for no reason I can tell, my gulp compile times for strictly sass tasks have become extremely slow. They are now averaging around 18-20s per compile, which is deathly slow. I tried switching from ruby-sass to node-sass, but node-sass doesn't seem to support almost any of the 3.3 sass syntax, which I need (specifically maps). Before they were all in the ms range; I never remember them being even more than 1s.

Here is my task file for sass:

var gulp         = require('gulp');
var sass         = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss    = require('gulp-minify-css');
var notify       = require('gulp-notify');
var rename       = require('gulp-rename');
var handleErrors = require('../util/handleErrors');
var browserSync  = require('browser-sync');

gulp.task('styl', function() {
    return gulp.src('styl/src/screen.scss')
        .pipe(sass({sourcemap: false, style: 'compact'}))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('styl/bld'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('../bld'))
        .pipe(notify({ message: 'Styles task complete' }))
        .pipe(browserSync.reload({ stream: true, notify: false }))
        .on('error', handleErrors);
});

Here is a recent gulp run, also:

[11:56:22] Starting 'setWatch'...
[11:56:22] Finished 'setWatch' after 44 μs
[11:56:22] Starting 'browserify'...
[11:56:22] Running 'bundle'...
[11:56:22] Starting 'uglify'...
[11:56:22] Finished 'uglify' after 11 ms
[11:56:22] Starting 'styl'...
[11:56:24] Finished 'bundle' in 1.76 s
[11:56:24] Finished 'browserify' after 1.76 s
[11:56:38] Finished 'styl' after 16 s
[11:56:38] Starting 'build'...
[11:56:38] Finished 'build' after 15 μs
[11:56:38] Starting 'browserSync'...
[11:56:38] Finished 'browserSync' after 6.28 ms
[11:56:38] Starting 'watch'...
[11:56:38] Finished 'watch' after 46 ms
[11:56:38] Starting 'default'...
[11:56:38] Finished 'default' after 32 μs
[BS] Proxy running. Use this URL: http://10.0.1.6:3002
[11:56:45] Starting 'styl'...
[BS] File Changed: screen.min.css
[BS] Injecting file into all connected browsers...
[11:57:05] Finished 'styl' after 20 s

Answer 1

The answer to this has nothing to do with Gulp, but rather to do with the possible duplicate in the comments which links to this https://github.com/sass/sass/issues/1019.

I temporarily fixed this by switching from Susy 2.x back to Susy 1.x. Per Kaij's comment in the link referenced above, basically every use of span() in Susy is absolutely killing compile time: the switch back to Susy 1.x took me from ~24s compile time to ~4s compile time. I'm not sure if this same issue is relatable to other frameworks, but I assume it might be.

EDIT: Further information on the issue, specific to Susy: https://github.com/ericam/susy/issues/325#issuecomment-47670013

Answer 2

I also ran into this same problem with node-sass and ember-cli. What was really killing our compile time was any use of the @extends directive. They each added about 10 seconds to our compile time.