gulp-sourcemaps fails if target file gets too large

Question

In my gulpfile.js I have this:

// Sass configuration
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    plumber = require('gulp-plumber');
    autoprefixer = require('autoprefixer');
    postcss      = require('gulp-postcss');

function handleError(err) {
    console.log(err.toString());
    this.emit('end');
}

gulp.task('sass', function() {
gulp.src([
    'kraater-web/src/app/css/admin/vars.scss',
    'kraater-web/src/app/css/admin/*.scss'])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(concat('admin.scss'))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
    .pipe(sass())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(cleanCSS())
    .pipe(concat('admin.css'))
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
});

gulp.task('default', ['sass'], function() {
    gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);
})

I compile all my .scss files into one big admin.css (it isn't even that big though) with mapping, but at one point, when I enter extra parameters to scss the gulp file fails and gives me this error:

C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289 
throw new Error('Invalid mapping: ' + JSON.stringify({
        ^

Error: Invalid mapping: {"generated":{"line":186,"column":9},"source":"admin.scss","original":{"line":381,"column":-6},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289:13)
    at SourceMapGenerator_addMapping [as addMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:101:12)
    at C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:72:17
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-consumer.js:155:14)
    at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:48:24)
    at applySourceMap (C:\wamp\www\site17\node_modules\vinyl-sourcemaps-apply\index.js:26:40)
    at filePush (C:\wamp\www\site17\node_modules\gulp-sass\index.js:105:9)
    at Object.callback (C:\wamp\www\site17\node_modules\gulp-sass\index.js:147:9)
    at options.success (C:\wamp\www\site17\node_modules\node-sass\lib\index.js:308:32)

Watching build tasks has finished.

The new parameters I enter into scss are valid, because if I delete some lines before it, then gulp compiles nicely again. It's as if scss maps memory gets full or something and fails to compile.

Anybody seen something like this before?

score 0 · Answer 1 · answered Jun 12 '18 at 06:47

Handling large files: pass the option largeFile: true to sourcemaps.init().

Check out on NPM.

// Sass configuration
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    plumber = require('gulp-plumber');
    autoprefixer = require('autoprefixer');
    postcss      = require('gulp-postcss');

function handleError(err) {
   console.log(err.toString());
   this.emit('end');
}

gulp.task('sass', function() {
gulp.src([
    'kraater-web/src/app/css/admin/vars.scss',
    'kraater-web/src/app/css/admin/*.scss'])
    .pipe(plumber())
    .pipe(sourcemaps.init({largeFile: true}))
    .pipe(concat('admin.scss'))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
    .pipe(sass())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(cleanCSS())
    .pipe(concat('admin.css'))
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('kraater-web/src/app/css/'))
});


gulp.task('default', ['sass'], function() {
gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);

thanks, but for some reason it doesn't help. Still gives the same error. I'm puzzled. — yodalr, Jun 12 '18 at 11:37
Please check out [this issue issue](https://github.com/mozilla/source-map/issues/301) and also [this issue](https://github.com/nodejs/help/issues/429). It looks like sourcemap sometimes has some kind of issue with the ampersand symbol. — user7637745, Jun 12 '18 at 15:39

score 0 · Accepted Answer · answered Jun 18 '18 at 13:32

Got it fixed by rolling back the gulp-sass to older version. I simply ran.

npm install gulp-sass@2.3.2

In cmd and it started to compile again.

Original poster of this fix was user araphiel, from in this thread: https://github.com/nodejs/help/issues/429

gulp-sourcemaps fails if target file gets too large

2 Answers2