Gulp suddenly compiles extremely slowly

Question

Recently, I can’t say that my gulp compilation time for strictly sass tasks has become extremely slow. Now they average 18-20 s per compilation, which is deadly slow. I tried switching from ruby-sass to node-sass, but node-sass doesn't seem to support almost any 3.3 sass syntax that I need (specifically maps). Before they were all in the ms range; I never remember that there were more than 1 second.

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, too:

 [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 question is not related to Gulp, but rather to possible duplication in the comments that link to this https://github.com/sass/sass/issues/1019 .

I temporarily installed this by switching from Susy 2.x to Susy 1.x. Per Kaij's comment in the link mentioned above, basically every use of span () in Susy absolutely kills compilation time: switching back to Susy 1.x took me from compiling ~ 24s until compiling time ~ 4s. I'm not sure if this same problem applies to other frameworks, but I guess it could be.

EDIT: Additional Susy Related Problem Information: https://github.com/ericam/susy/issues/325#issuecomment-47670013

Answer 2

I also ran into this problem with node-sass and ember-cli. What really killed our compilation time was any use of the @extends directive. Each of them added about 10 seconds to our compilation time.