gulp-sourcemaps, Uncaught SyntaxError: Неожиданный токен:

Question

Фон: Я пытаюсь настроить сопоставление источников с моей задачей Gulp Scripts. Я считаю, что отображение работает (см ниже, что «привет мир» console.log ссылается main.js:10, а не all.min.js), но я получаю сообщение об ошибке консоли: Uncaught SyntaxError: Unexpected token :

---

Вопрос: Почему это происходит, и это вызовет проблему, которая помешает мне полностью использовать возможности сопоставления источника js?

---

Ссылки:

скриншоте:

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' })); 

}); 

Проект дерева каталогов:

. 
├── 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

---

Примечание: Да я знаю, JQuery предлагает файл карты, но я хотел бы сделать это таким образом по разным причинам.

Answer 1

Sourcemap - объект json. Вы должны загрузить их должным образом; хотя Chrome знает, что он является исходным кодом и будет рассматривать его как таковой, вы должны убедиться, что вы явно определяете его тип как application/json, чтобы обеспечить совместимость с браузером.

<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.