设置:
Visual Studio 2013更新5
我正在使用Task Runner Explorer和配方中的下面gulp文件:
'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var assign = require('lodash.assign');
var customOpts = {
entries: ['./app/controller.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./',{includeContent: false, sourceRoot: '../'})) // writes .map file
.pipe(gulp.dest('./dist'));
}
'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var assign = require('lodash.assign');
var customOpts = {
entries: ['./app/controller.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./',{includeContent: false, sourceRoot: '../'})) // writes .map file
.pipe(gulp.dest('./dist'));
}
以下是来自html页面,其中包含对我的browserify捆绑文件的引用:
我获得以下源地图和捆绑包。 SourceMap:
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="dist/bundle.js"></script>
</head>
软件包:
{"version":3,"sources":["node_modules/browserify/node_modules/browser-pack/_prelude.js","app/controller.js","app/module.js"],"names":[],"mappings":"AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClBA;AACA","file":"bundle.js","sourceRoot":"../"}
我可以使用IE和Chrome中通过源地图加载的原始文件成功调试。
问题:
我无法使用源映射文件中的函数内的脚本调试器进行调试,但我可以在捆绑文件中进行调试。
可以在controller.js中调试函数,但可以在控制器函数之外调试
如果您有任何建议,请告诉我。 Chrome和IE调试工作正常,但在Visual Studio中我们团队调试的比例很高。