Incorrect filename using gulp-sourcemaps

Question

I'm using gulp-sourcemaps in my project to process my SASS and JavaScript. My gulpfile.js is correctly generating .map files, though Chrome is showing the wrong filenames in Developer Tools and Console. At the moment, I'm unsure where the issue is.

My project tree:

gulpfile.js
public/
  sass/
    main.sass
    import/
      [.. more files and directories (all imported in main.sass) ..]
   js/
     main.js
     test.js
     min/
       sourcemaps/
         main.js.map
       main.js
       all.js
    css/
      main.css
      sourcemaps/
        main.css.map

My gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var plumber = require('gulp-plumber');
var prefix = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

var options = {
    styles: {
        "source": "public/sass/main.sass",
        "destination": "public/css",
        "sourcemaps": "sourcemaps"
    },
    scripts: {
        "source": "public/js/*.js",
        "destination": "public/js/min",
        "sourcemaps": "sourcemaps"
    }
}

gulp.task('styles', function() {
return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
    .pipe(plumber())
    .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
    .pipe(sourcemaps.write(options.styles.sourcemaps))
    .pipe(gulp.dest(options.styles.destination));
});

gulp.task('scripts', function() {
    return gulp.src(options.scripts.source)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('all.js'))
        .pipe(gulp.dest(options.scripts.destination))
        .pipe(rename('main.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write(options.scripts.sourcemaps, {includeContent: false, sourceRoot: '../../'}))
        .pipe(gulp.dest(options.scripts.destination));
});

gulp.task('default', ['styles', 'scripts'], function() {
    gulp.watch('public/sass/**', ['styles']);
    gulp.watch('public/js/**', ['scripts']);
});

The plan is:

• 'styles' compiles public/sass/main.sass (which includes all of my SASS source), auto-prefixes the source, writes a sourcemap and outputs public/css/main.css

• 'scripts' concatenates all files in the public/js directory, uglifies the source, writes a sourcemap and outputs public/js/min/main.js

After this entire process, I want to be left with public/css/main.css containing all my compiled, auto-prefixed, minified SASS source and public/js/min/main.js containing all my concatenated, minified, JavaScript source.

At the moment, styles in developer tools show the filename _box-sizing.scss (which is a dependency from public/sass/import/lib/neat), a file that contains no styles for the element I am inspecting. The filename should be _header.sass (from public/sass/import/layouts/common/_header.sass).

Similarly, the console shows main.js no matter the source file. I have public/js/main.js and public/js/test.js - these files should be concatenated and output to public/js/min/main.js. Both these files only contain a single console.log() for testing purposes and the filename displayed in Chrome is main.js for both.

I hope this makes sense. Thank you in advance

Answer 1

I made resolution after comment out the css beautify code in gulpfile.js

//.pipe(cssbeautify()) OR

//.pipe(uglify())

Answer 2

I've encountered the same problem without finding a solution. Maybe I'm wrong but it seems that gulp-Sourcemap has one or more issues to resolve.

https://github.com/floridoo/gulp-sourcemaps/issues/94#issuecomment-165164311