TypeScript Source Maps After Uglify

Posted by robert | Filed under TypeScript

Update: New and better Boilerplate that uses ES6 Modules in TypeScript check it out.

I am going to take my first TypeScript Source Maps Example a step future. I am going to take our compiled TypeScript code and then use UglifyJS to minify it. UglifyJS will also create a new source map for the minified version of the code.

I am going to assume you have read my first TypeScript Source Maps Example and know how to use GruntJS to compile TypeScript classes.

Here is part of my Gruntfile that does all the work for us:

grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    typescript: {
        base: {
            src: ['../ts/Man.ts'],
            dest: '../js/main.js',
            options: {
                sourcemap: true,
                declaration: false
            }
        }
    },

    uglify: {
        dist: {
            options: {
                // Reference to the source map TypeScript created.
                sourceMapIn: '../js/main.js.map',
                // Creates our new source map after minifying.
                sourceMap: '../js/main.min.map',
                // The root folder where the TypeScript live.
                sourceMapRoot: '../ts/'
            },
            files: {
                '../js/main.min.js': ['../js/main.js']
            }
        }
    }

});

You can download all the TypeScript Source Maps with Uglify example files here and try it out:
https://github.com/codeBelt/Grunt-TypeScript-Source-Map-to-JavaScript-with-Uglify

Comments (0) | November 15th, 2013