gulp-sourcemaps, Uncaught SyntaxError: Unexpected token :

Question

Background: I am trying to setup source mapping with my Gulp Scripts task. I believe the mapping is working ( see below that the 'hello world' console.log is referencing main.js:10, rather than all.min.js), but I am receiving a console error : Uncaught SyntaxError: Unexpected token :

The Question: Why is this happening, and is it going to cause a problem to preclude me from fully utilizing the capabilities of js source mapping?

References:

The Screenshot:

gulpfile.js:

    var gulp = require('gulp'),
    gutil = require('gulp-util'),
    notify = require('gulp-notify'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-sass'),
    livereload = require('gulp-livereload'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    ignore = require('gulp-ignore');

    var paths = require('./gulp/paths.js');

//default task. 1.jshint 2.watch 3.log
gulp.task('default',['scripts','styles','watch'],function(){
    return gutil.log(gutil.colors.bold.yellow('Gulp is running!'));
});

//Styles task
gulp.task('styles',function(){
    gulp.src('styles/sass/style.scss')
        .pipe(sourcemaps.init())

        .pipe(sass({errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass'}).on('error', gutil.log))

        .pipe(sourcemaps.write('.')) //Output sourcemap alongside style.css
        .pipe(gulp.dest('.')) //Output Destination is relative to gulpfile.js

        .pipe(livereload());

});

//watch task
gulp.task('watch',function(){

    livereload.listen();
    gulp.watch(['js/**/*.js','!js/dist/*'],['scripts'])
    gulp.watch('styles/sass/**/*.scss',['styles']);
});

//jshint task against all custom js
gulp.task('jshint', function(){
        return gulp.src(paths.customJs)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));

});

//scripts task
gulp.task('scripts',function(){
    return gulp.src(paths.groupAll)

        .pipe(sourcemaps.init({loadMaps:true}))

        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js/dist'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify()).on('error', gutil.log)

        .pipe(sourcemaps.write('.'))

        .pipe(gulp.dest('./js/dist'))
        .pipe(notify({ message: 'Scripts task complete' }));

});

Project Directory Tree:

.
├── gulp
│   └── paths.js
├── js
│   ├── dist
│   │   ├── all.js
│   │   ├── all.min.js
│   │   └── all.min.js.map
│   └── lib
│       ├── vendor
│       │   └── jquery-2.1.4.js
│       ├── 2.js
│       └── main.js
├── styles
│   └── sass
│       ├── theme
│       │   └── _colors.scss
│       └── master.scss
├── .gitignore
├── .jshintignore
├── .jshintrc
├── LICENSE.md
├── README.md
├── footer.php
├── gulpfile.js
├── header.php
├── index.php
├── layout-description.txt
├── package.json
├── sidebar.php
├── style.css
└── style.css.map

all.min.js.map: http://pastebin.com/wck38eHJ

Note: Yes I know JQuery offers a map file, but I wish to do it this way for various reasons.

@Mantisimo No. I cannot get the console error to go away, but it appears as though the console error itself doesn't block me from using source maps. — Daniel Dropik, Dec 02 '15 at 21:35

score 3 · Answer 1 · answered Dec 20 '15 at 22:05

A sourcemap is a json object. You should load them properly; although Chrome knows it is a sourcemap and will treat it as such you ought to make sure you explicity define its type as application/json to ensure browser compatibility.

<script type="application/json" src="js/index.js"></script>

According to Google Developers platform

Verify web server can serve Source Maps Some web servers, like Google App Engine for example, require explicit configuration for each file type served. In this case, your Source Maps should be served with a MIME type of application/json, but Chrome will actually accept any content-type, for example application/octet-stream.

gulp-sourcemaps, Uncaught SyntaxError: Unexpected token :

1 Answers1

According to Google Developers platform