Minify typescript files using Grunt

Question

I wanted to minify typescript files in my angular app.I tried by giving grunt command in my Gruntfile.js as

  uglify:{

            ts:{
                src:['test/scripts/**/*.ts'],
                dest:'test/scripts/**/*.ts'
            },

            js:{
                src:['test/scripts/hr.js'],
                dest:'test/scripts/hr.js'
            }
        }

When I ran the command grunt uglify The js files were uglified but not the ts files.How can I minify ts files?

You will want to uglify the .js files AFTER they have been compiled to JavaScript. This makes it a two step process if you use grunt to compile your TypeScript. — Martin
– Martin, Commented Apr 16, 2015 at 12:55
@Martin .So I can't directly minify/uglify the typescript files. — forgottofly
– forgottofly, Commented Apr 16, 2015 at 12:56
No you cannot. And if you could, why would you want to? No one should ever see the TypeScript besides the developers who are reading and writing the TypeScript. TypeScript is your source code, it will never be sent to the browser. JavaScript is your object code that is sent to the browser and run in the browsers JavaScript VM (or on a server running NodeJS). JavaScript sent to the browser SHOULD be uglified. — Martin
– Martin, Commented Apr 16, 2015 at 13:01

Saba · Accepted Answer · 2015-04-17 04:41:21Z

2

This is the way you should write your gruntfile:

grunt.initConfig({

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

  typescript: {
    base: {
        src:['test/scripts/**/tsfile.ts'],
            dest:'test/scripts/**/tsfile.js'
        options: {
            sourcemap: true,
            declaration: false
        }
    }
  },

  uglify: {
    dist: {
        files: {
            'test/scripts/**/tsfile.min.js': ['test/scripts/**/tsfile.js'],
            'test/scripts/hr.js' : ['test/scripts/hr.js']
        }
    }
  }

});

answered Apr 17, 2015 at 4:41

Saba

3,6662 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

forgottofly Over a year ago

Hi Saba.Thanks for the answer.What if I have two files in diffferent location s and I want to minify the same ?

Saba Over a year ago

Do you want to compile both into one or seperately?

forgottofly Over a year ago

Compile both separately

Saba Over a year ago

You can specify the source and destination paths in files object. files : { dest1 : [source1], dest2 : [source2], ...}

Collectives™ on Stack Overflow

Minify typescript files using Grunt

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related