CODEWITHSUNDEEP
javascriptgulpminify
user2727195
user2727195

Reputation: 7340

gulp reference to original source after minification

Once magnification is done, and let's say I had some bug,

and I want the console of browser to point me to original source so I could see the problem clearly instead of minified lines of code.

Script.js + many more files (concatenation plus minification) 

   var somevar = 4
   console.log(someVar) //misspelled var name

console will take me to this file

script.min.js 

var somevar=4;console.log(someVar)

I've seen some .map files with some js libraries, don't know how they work.

Can someone advise how can the console of a browser can refer to original source in case of an error /problem in a minified file.

gulp.task("app", function() {
    var app = [
        "js/libs/abc.js",
        "js/file1.js",
        "js/file2.js"
    ];

    gulp.src(app)
        .pipe(concat("app.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("js"))
});

Upvotes: 0

Views: 110

Answers (1)

user3610227
user3610227

Reputation:

Install this to your dev dependencies https://www.npmjs.com/package/gulp-sourcemaps 

gulp.src(app)
        .pipe(concat("app.min.js"))
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest("js"))

Make sure the generated JavaScript file, example.js, has the source mapping url at the end as follows: 

//# sourceMappingURL=example.js.map

Upvotes: 1

Related Questions