gulp-sourcemaps 的使用过程中,在chrome中没找到对应的可调式的源码啊
先说问题:
本人最近在学习gulp的使用,用起来确实方便了很多,但是使用过程中,对JS代码进行了压缩处理,在浏览器中如何调试呢?引入了gulp-sourcemaps插件,但是并没有起到自己期待的效果。。。
求助各位大神,指点一二。。
贴出配置文件如下:
//定义css、js源文件路径
var cssSrc = 'css/**/*.css',
cssMinSrc = 'dist/css/**/*.css',
jsSrc = 'source/**/*.js',
jsMinSrc = 'dist/js/**/*.js',
lessSrc = 'less/**/*.less',
imgMinSrc = 'dist/images/*.{png,jpg,gif,ico}',
htmlSrc = '../*.jsp',
es6Src='source/**/*.es6';
//转换es6文件为es5代码
gulp.task("toes5", function () {
return gulp.src(es6Src)// ES6 源码存放的路径
.pipe(babel())
.pipe(gulp.dest("source")); //转换成 ES5 存放的路径
});
//jsHint代码检查
gulp.task('jshint', function() {
gulp.src(jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//压缩js
gulp.task('uglify',function(){
return gulp.src(jsSrc)
.pipe(sourcemaps.init())
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'));
});
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src(jsMinSrc)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('dist/js'));
});
//Html替换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['dist/**/*.json', '../*.jsp'])
.pipe(revCollector())
.pipe(gulp.dest('../'));
});
//监听es6编译
gulp.watch([es6Src,jsSrc], function (event) {
runSequence(
['toes5'],
['jshint'],
['uglify'],
['revJs'],
['revHtml'],
['reload']
)
});
代码结构图如下:
希望大神能指点一二,谢谢
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
或许可以参考 http://www.cnblogs.com/zichi/...