gulp babel - gulp sourcemaps are coming out buggy

Question

Here is the task:

var gulp = require('gulp'),
    clean = require('gulp-clean'),
    copy = require('gulp-copy'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    Server = require('karma').Server,
    _ = require('lodash');

gulp.task('js-build', ['copy-iso'], function(){
    return gulp.src(['client/src/application.js', 'client/src/**/*.js'])
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(sourcemaps.write('.', {
            sourceRoot: '/src',
            includeContent: false
        }))
        .pipe(gulp.dest('./client/build'));
});

Basically, this is producing a sourcemap that maps incorrectly some of the time. The way I test is I load it up in chrome, open the dev tools and try to add break points. Here is an example:

source:

(function () {
        'use strict';

        angular
            .module('core')
            .filter('phoneNumberFormat', phoneNumberFormat);

        function phoneNumberFormat() {
            return phoneNumberFilter;

            function phoneNumberFilter(number) {
                /* 
                @param {Number | String} number - Number that will be formatted as telephone number
                Returns formatted number: (###) ###-####
                    else if number.length < 7: (###) ###

                Does not handle country codes that are not '1' (USA)
                */
                if (!number) { return ''; }

                number = number.toString().replace(/[^0-9]+/g, '');

                var formattedNumber = '';

                // if the first character is '1', strip it out and add it back
                var c = (number[0] == '1') ? '1 ' : '';
                number = number[0] == '1' ? number.slice(1) : number;

                // # (###) ###-#### as c (area) front-end
                var area = number.substring(0, 3);
                area = area.length > 0 ? area.length == 3 ? "(" + area + ") " : "(" + area : '';

                var front = number.substring(3, 6);
                front = front + (front.length == 3 ? '-' : '');

                var end = number.substring(6, 10);

                formattedNumber = c + area + front + end;
                return formattedNumber;
            }
        }
    })();

built:

'use strict';

(function () {
            'use strict';

            angular.module('core').filter('phoneNumberFormat', phoneNumberFormat);

            function phoneNumberFormat() {
                        return phoneNumberFilter;

                        function phoneNumberFilter(number) {
                                    /* 
                                    @param {Number | String} number - Number that will be formatted as telephone number
                                    Returns formatted number: (###) ###-####
                                        else if number.length < 7: (###) ###
                                      Does not handle country codes that are not '1' (USA)
                                    */
                                    if (!number) {
                                                return '';
                                    }

                                    number = number.toString().replace(/[^0-9]+/g, '');

                                    var formattedNumber = '';

                                    // if the first character is '1', strip it out and add it back
                                    var c = number[0] == '1' ? '1 ' : '';
                                    number = number[0] == '1' ? number.slice(1) : number;

                                    // # (###) ###-#### as c (area) front-end
                                    var area = number.substring(0, 3);
                                    area = area.length > 0 ? area.length == 3 ? "(" + area + ") " : "(" + area : '';

                                    var front = number.substring(3, 6);
                                    front = front + (front.length == 3 ? '-' : '');

                                    var end = number.substring(6, 10);

                                    formattedNumber = c + area + front + end;
                                    return formattedNumber;
                        }
            }
})();
//# sourceMappingURL=phone-number.filter.js.map

You can see that the two are almost identical. Still, I cannot place a breakpoint on the line:

return phoneNumberFilter;

When I do (place the breakpoint either in the source or in the built file), I get redirected to the line below it (function phoneNumberFilter(number) {).

These wierd redirects keep popping up in almost every file and I can't seem to find any rhyme or reason to them. Sometimes they redirect up a line some times to the end of the scoping function...idk.

Thanks in advance.

gulp babel - gulp sourcemaps are coming out buggy

0 Answers0