gulp-ruby-sass error The command line is too long

Question

i have approximately 30 folders, every folder have scss file. i am compiling the scss using gulp-ruby-sass. still now it's working fine,today i created new scss file then it start giving the following error

The command line is too long.

i searched and understand the command prompt cannot process the cmd after certain length. but i don't know how to over come the problem. please find below my gulp task

gulp.task('compile-css', function() {
return sass(src + '/app/**/*.scss', { base: 'app' })
    .pipe(gulp.dest(dest + '/app'))
    .pipe(browserSync.reload({ stream: true }))
});

Answer 1

There doesn't seem to be any option to gulp-ruby-sass that would help, and there's been an open GitHub issue about this problem for a couple of months now, so I think you'll have to make due with a hacky workaround.

The only thing I can think of is to split up all your SCSS files into batches and invoke sass once for each batch then merge the resulting streams using merge-stream.

In order to do this you have to first find all your SCSS files, which means you need to use glob directly.

Here's what such a solution could look like:

var glob = require('glob'); 
var merge  = require('merge-stream');

var maxArgs = 1000;

gulp.task('compile-css', function() {
  var files = glob.sync(src + '/app/**/*.scss');
  var stream = merge();
  while (files.length) {
    stream.add(sass(files.splice(0, maxArgs), { base:'app' }));
  };
  return stream
    .pipe(gulp.dest(dest + '/app'))
    .pipe(browserSync.reload({ stream: true }))
});

You'll have to play around with maxArgs to find a value that works for you.

Answer 2

below code i wrote based on Sven Schoenung answer with small modification in loop

gulp.task('compile-css', function() {
var files = glob.sync(src + '/app/**/*.scss');
var stream = merge();

for (var i = 0; i < files.length; i++) {
    var file = files[i];
    stream.add(sass(file, { base: 'app' }));
}

return stream
    .pipe(gulp.dest(dest + '/app'))
    .pipe(browserSync.reload({ stream: true }))
});