Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
325 views
in Technique[技术] by (71.8m points)

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']
        )
    });
    
    代码结构图如下:

clipboard.png

希望大神能指点一二,谢谢


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...