2

背景: Gulp Scripts タスクでソース マッピングをセットアップしようとしています。main.js:10マッピングは機能していると思いますが (「hello world」console.log がではなくを参照していることを以下で確認してください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

ソースマップは json オブジェクトです。それらを適切にロードする必要があります。Chrome はそれがソースマップであることを認識しており、そのように扱いますが、ブラウザの互換性を確保するために、そのタイプを application/json として明示的に定義する必要があります。

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

Google Developers プラットフォームによると

Web サーバーがソース マップを提供できることを確認する Google App Engine などの一部の Web サーバーでは、提供するファイルの種類ごとに明示的な構成が必要です。この場合、ソース マップは application/json の MIME タイプで提供する必要がありますが、Chrome は実際には application/octet-stream などの任意のコンテンツ タイプを受け入れます。

于 2015-12-20T22:05:06.557 に答える