gulp-sourcemaps 的使用过程中,在chrome中没找到对应的可调式的源码啊

发布于 2022-09-04 18:54:17 字数 1818 浏览 16 评论 0

先说问题:

本人最近在学习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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文