---
title: Uglifying AngularJS for Production
description: "A new Version of Tatami wasreleased [https://blog.ippon.tech/vcu-ippon-angularjs-tatami/]\nrecently, since this initial deployment issues began to surface. Several\nrevisions have been made to address these issues, most notably a release\ndesigned to speed load times, using uglification for Tatami which is described\nin\nthis post by Justin"
image: https://blog.ippon.tech/hubfs/Imported_Blog_Media/ippon-bkr-Jan-18-2024-06-00-39-1597-PM.png
---
[Skip to main content](https://blog.ippon.tech/uglifying-angularjs-for-production#main)
[   ](https://ipponusa.com/)
- [Home](https://ipponusa.com)
- [Show submenu for About About](https://ipponusa.com/about-us)
- [Who We Are](https://ipponusa.com/who-we-are)
- [Careers](https://ipponusa.com/careers)
- [Show submenu for Our Partners Our Partners](https://ipponusa.com/our-partners/)
- [AWS](https://ipponusa.com/our-partners/aws/)
- [Snowflake](https://ipponusa.com/our-partners/snowflake/)
- [Databricks](https://ipponusa.com/our-partners/databricks/)
- [Microsoft](https://ipponusa.com/our-partners/microsoft/)
- [Show submenu for Services Services](https://ipponusa.com/services)
- [Snowflake](https://ipponusa.com/service/snowflake-concierge/)
- [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/)
- [Data & Analytics](https://ipponusa.com/service/data-analytics/)
- [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/)
- [Platform Modernization](https://ipponusa.com/service/platform-moderization/)
- [Product Innovation](https://ipponusa.com/service/product-innovation/)
- [Operating Model](https://ipponusa.com/service/operating-model/)
- [Blogs](https://blog.ippon.tech/)
- [Success Stories](https://ipponusa.com/success-stories/)
- [Show submenu for Resources Resources](https://ipponusa.com/resources/)
- [eBooks](https://ipponusa.com/ebooks/)
- [The Data Pour](https://info.ippon.tech/the-data-pour)
- [Videos & Webinars](https://info.ippon.tech/videos-and-webinars)
- [Media Center](https://ipponusa.com/media-center/)
Search
Open main navigation
Close main navigation
- [Home](https://ipponusa.com)
- Show submenu for About About
- About
- [About](https://ipponusa.com/about-us)
- [Who We Are](https://ipponusa.com/who-we-are)
- [Careers](https://ipponusa.com/careers)
- Show submenu for Our Partners Our Partners
- Our Partners
- [Our Partners](https://ipponusa.com/our-partners/)
- [AWS](https://ipponusa.com/our-partners/aws/)
- [Snowflake](https://ipponusa.com/our-partners/snowflake/)
- [Databricks](https://ipponusa.com/our-partners/databricks/)
- [Microsoft](https://ipponusa.com/our-partners/microsoft/)
- Show submenu for Services Services
- Services
- [Services](https://ipponusa.com/services)
- [Snowflake](https://ipponusa.com/service/snowflake-concierge/)
- [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/)
- [Data & Analytics](https://ipponusa.com/service/data-analytics/)
- [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/)
- [Platform Modernization](https://ipponusa.com/service/platform-moderization/)
- [Product Innovation](https://ipponusa.com/service/product-innovation/)
- [Operating Model](https://ipponusa.com/service/operating-model/)
- [Blogs](https://blog.ippon.tech/)
- [Success Stories](https://ipponusa.com/success-stories/)
- Show submenu for Resources Resources
- Resources
- [Resources](https://ipponusa.com/resources/)
- [eBooks](https://ipponusa.com/ebooks/)
- [The Data Pour](https://info.ippon.tech/the-data-pour)
- [Videos & Webinars](https://info.ippon.tech/videos-and-webinars)
- [Media Center](https://ipponusa.com/media-center/)
- Search
- [Contact Us](https://ipponusa.com/contact/)
[Contact Us](https://ipponusa.com/contact/)
# Uglifying AngularJS for Production
by [Kenneth Hegeland](https://blog.ippon.tech/author/kenneth-hegeland)
September 15, 2015
Sep 15, 2015
A new Version of Tatami was [released](https://blog.ippon.tech/vcu-ippon-angularjs-tatami/) recently, since this initial deployment issues began to surface. Several revisions have been made to address these issues, most notably a release designed to speed load times, using uglification for Tatami which is described [in this post by Justin Risch](https://blog.ippon.tech/increasing-the-performance-of-your-web-application/). The uglification greatly improved performance – from our Richmond, VA office load times went from up to five minutes to about a second. Now that performance issues have been fixed, we must focus on maintaining it, unfortunately uglification in our current form has a downfall, that is, the code is always uglified during build time. Using uglified code in maintenance is a nightmare, the entire JavaScript code base is reduced to around 63 lines of code, which are not easily read by a human. Thus when something goes wrong (and it will), we are tasked with deciphering an error message which previous to uglification wasn’t always helpful, but now we also have no reference to where the issue came from. Using grunt it is possible to specify when to uglify angularjs code, and when not to uglify angularjs code – ideally, we want a development environment which does not uglify code.
#### **Creating an Uglification Task in Grunt**
Using grunt and [grunt-template](https://www.npmjs.com/package/grunt-template?ref=blog.ippon.tech), we can generate an index file which includes different files based on the task being run (we would like a development task, and a build task). We will create an index template file which will be used to create the specific index file required, for Tatami, our template file looks like this
```
Tatami
<%= cssTags %>
<%= jsTags %>
```
index.html.tpl
In the file we have two important tags to note: `<%= cssTags %>` and `<%= jsTags %>`. These reference the variables cssTags, and jsTags in the subtask definitions in our gruntfile. The task definitions are given by
```
grunt.initConfig({
...
template: {
prepareMinIndex: {
options: {
data: {
jsTags: '',
cssTags: ' '
}
},
files: {
'src/main/webapp/index.html': ['src/main/webapp/index.html.tpl']
}
},
prepareDevIndex: {
options: {
data: {
jsTags: prepareTags(jsFiles, ''),
cssTags: prepareTags(cssFiles, ' ')
}
},
files: {
'src/main/webapp/index.html': ['src/main/webapp/index.html.tpl']
}
}
},
concurrent: {
minifyTarget: ['template:prepareMinIndex', 'cssmin', 'htmlmin', 'uglify'],
devTarget: ['template:prepareDevIndex', 'htmlmin']
}
})
```
Note that in our grunt file, template has two subtasks, one for each build version, and in each they have cssTags, and jsTags in the data object. In both, the value will be inserted into the index file, for the development version, a method is used to build the string to be inserted, since the file list is referenced more than once. We also register concurrent tasks to generate the template along with a few other tasks. Now we simply register a build, and dev grunt task,
```
grunt.initConfig({
...
grunt.loadNpmTasks('grunt-template');
...
grunt.registerTask('minify', ['clean','concurrent:minifyTarget']);
grunt.registerTask('dev', ['clean', 'concurrent:devTarget']);
})
```
running grunt minify will generate our index file with the uglified sources being used, and grunt dev will generate the index file with each file included as is (not uglified).
#### **Adding a Maven Profile for Uglification**
Our default maven build is set to not minify anything, thus we can type mvn jetty:run, and we will start Tatami in a development environment. We would like to be able to test that our uglified build works, so rather than adding the command grunt minify to the build profile, we create a new profile, named uglified. The uglified profile is created by adding the following lines to the pom file:
```
uglified
org.codehaus.mojo
exec-maven-plugin
1.2.1
compile
exec
${project.npm.bin}/grunt
minify
```
The maven plugin will run grunt minify during compile time, we can start up Tatami with this profile by running mvn -Puglified jetty:run. Our default profile already ran grunt for minification, the only change is to add the dev command line argument to have the default profile become our development profile.
Finally, during production, we can use mvn -Puglified,build … in order to generate an uglified build ready for release.
This change has been merged with master, can be viewed [on GitHub](https://github.com/ippontech/tatami/commit/ba4ea16accb03f4b13adb31428bb467c256b274b?ref=blog.ippon.tech#diff-595bf3fa2348192244b0319be33066b8) and has been [deployed](http://app.tatamisoft.com/?ref=blog.ippon.tech#/login). With this change, those working on Tatami will be able to more easily address any issues and provide the necessary fixes.
## Related Articles
### Comments
### Subscribe to Our Blog!
Stay informed with the latest insights and updates by signing up for our weekly blog newsletter – delivered straight to your inbox!
[Back to blog homepage »](https://blog.ippon.tech/)
Ippon is a consulting and expertise firm, who is convinced that technology is a source of progress for society. We help our clients leverage their digital assets to design an appropriate strategy and deploy their transformation roadmap at scale.
#### Navigation
- [Home](https://ipponusa.com/)
- [About](https://ipponusa.com/about-us/)
- [Services](https://ipponusa.com/services/)
- [Blogs](https://blog.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
- [eBooks](https://ipponusa.com/ebooks/)
- [The Data Pour](https://info.ippon.tech/the-data-pour?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
[Contact Us](https://ipponusa.com/contact/)
[Join Us](https://ipponusa.com/careers/)
#### Services
- [Data & Analytics](https://ipponusa.com/service/data-analytics/)
- [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/)
- [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/)
- [Operating Model](https://ipponusa.com/service/operating-model/)
- [Platform Modernization](https://ipponusa.com/service/platform-moderization/)
- [Product Innovation](https://ipponusa.com/service/product-innovation/)
#### Ippon International
- [France](https://fr.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
- [Australia](https://au.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701)
- #### Contact
- Ippon Technologies
[3431 West Leigh Street Richmond, VA 23230, USA](https://maps.app.goo.gl/RySm6SAwZnsxeiLz9)
- [(844) 477- 6687](tel:8444776687)
- [Sales@ipponusa.com](mailto:Sales@ipponusa.com)
©Copyright 2024 Ippon USA. All Rights Reserved. | [Terms and Conditions](https://ipponusa.com/privacy-policy/) | [Privacy Policy](https://ipponusa.com/privacy-policy/) | [Website by Skol Marketing](https://skolmarketing.com/)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Kenneth Hegeland",
"url" : "https://blog.ippon.tech/author/kenneth-hegeland"
},
"dateModified" : "2024-01-29T16:17:40.514Z",
"datePublished" : "2015-09-15T16:17:00.000Z",
"headline" : "Uglifying AngularJS for Production",
"image" : [ "https://blog.ippon.tech/hubfs/Imported_Blog_Media/ippon-bkr-Jan-18-2024-06-00-39-1597-PM.png" ],
"mainEntityOfPage" : {
"@id" : "https://blog.ippon.tech/uglifying-angularjs-for-production",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.ippon.tech/hubfs/logo_SVG.svg"
},
"name" : "Ippon Technologies"
}
}
```