2

背景：我正在尝试使用我的 Gulp 脚本任务设置源映射。我相信映射正在工作（见下文，“hello world”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 提供了一个地图文件，但出于各种原因，我希望这样做。

4

1 回答 1

3

sourcemap 是一个 json 对象。您应该正确加载它们；尽管 Chrome 知道它是一个源映射并且会这样对待它，但您应该确保明确将其类型定义为 application/json 以确保浏览器兼容性。

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

根据谷歌开发者平台

验证网络服务器是否可以为源地图提供服务 某些网络服务器（例如 Google App Engine）需要对所提供的每种文件类型进行显式配置。在这种情况下，您的 Source Map 应该使用 application/json 的 MIME 类型，但 Chrome 实际上会接受任何内容类型，例如 application/octet-stream。

于 2015-12-20T22:05:06.557 回答