gulp-sourcemaps，未捕获的语法错误：意外的标记：
背景：我正在尝试使用我的Gulp脚本任务来设置源映射。 我相信映射工作（见下面的'hello main.js:10是引用main.js:10 ，而不是all.min.js ），但我收到一个控制台错误： Uncaught SyntaxError: Unexpected token :
问题：为什么会发生这种情况，是否会导致我无法充分利用js源映射function？
参考文献：
屏幕截图：
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提供了一个地图文件，但我希望这样做是由于各种原因。
一个sourcemap是一个json对象。 你应该正确地加载它们; 虽然Chrome知道它是一个源代码映射表，并且会像这样对待它，但是您应该确保将其types定义为application / json以确保浏览器兼容性。
<script type="application/json" src="js/index.js"></script>
根据Google Developers平台
validationWeb服务器可以提供源地图一些Web服务器，例如Google App Engine，需要对每个服务的文件types进行显式configuration。 在这种情况下，您的源地图应该使用MIMEtypes的application / json，但Chrome实际上会接受任何内容types，例如application / octet-stream。