sourcemaps in gulp not mapping to files

538 views Asked by At

I've been searching for related questions and found no answer (or question, for that matter) for this. Most questions are about wrong paths or sourcemaps not being generated, but I have not found anything like this.

When I process this task, i get a minified css file (bootstrap.min.css) and a sourcemap file (bootstrap.min.css.map).

But, when I inspect the code which uses these files, SOME parts direct me to bootstrap.css (which does not exist) like if the source is the processed less file, instead of the less files themselves... and SOME parts DO direct me to the .less file.

The parts that direct me to bootstrap.css do take me to the generated css, not minified. But i need it to lead me to the source less file (which is why we need the source maps in the first place)

Inside the generated sourcemap there is a link in the sources to bootstrap.css, but there is no bootstrap.css generated.

This is happening with my bootstrap.less task, but also with some other tasks that are almost exactly the same.

I haven't found any pattern that tells me why some parts do lead me to the less file and some do not.

I've been pulling my hair for a whole day trying to figure out what is wrong!.

I hope you can help.

var less         = require('gulp-less');
var gulpif       = require('gulp-if');
var sourcemaps   = require('gulp-sourcemaps');
var gulp         = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var csscomb      = require('gulp-csscomb');
var minify       = require('gulp-minify-css');
var rename       = require("gulp-rename");
var plumber      = require('gulp-plumber');

// config
var config = require('../../../config.json');

// options
var options = require('../../options/styles');
var useSourcemap = true;

gulp.src(config.source.less + '/bootstrap.less')
            .pipe(plumber())
            .pipe(gulpif(useSourcemap, sourcemaps.init()))
            .pipe(less(options.less))
            .pipe(autoprefixer(options.autoprefixer))
            .pipe(csscomb(options.csscomb))
            .pipe(minify(options.minify))
            .pipe(rename({
                extname: '.min.css'
            }))
            .pipe(gulpif(useSourcemap, sourcemaps.write('./', {includeContent: true, sourceRoot: '/sourcemaps'})))
            .pipe(gulp.dest(config.destination.base + config.destination.css));
    }
};

And the options file...

var config = require('../../config.json');
module.exports = {
  less: {
    strictMath: false,
    paths: [
      config.source.less,
      config.bootstrap.less,
      config.bootstrap.mixins
    ]
  },
  autoprefixer: {
    browsers: config.autoprefixerBrowsers
  },
  csscomb: {
    configPath: config.source.less + '/.csscomb.json'
  },
  minify: {
    compatibility: 'ie8',
    keepSpecialComments: '*',
    advanced: false
  }
};
0

There are 0 answers