What's the difference between concat and uglify and minify?

Question

What's the difference between concat, uglify, and minify tasks in grunt? I set up an uglify task for all of my site's javascript tasks, and it seemed to both minify and concatenate them. Grunt's site has a great description for how to configure each task, but it doesn't seem to explain what each task actually does.

Odaodab

Answer 1

• Concatenation is just appending all of the static files into one large file.

• Minification is just removing unnecesary whitespace and redundant / optional tokens like curlys and semicolons, and can be reversed by using a linter.

• Uglification is the act of transforming the code into an "unreadable" form, that is, renaming variables/functions to hide the original intent... It is, also, irreversable.

Caboose

Given that the uglify grunt task can perform the concat, do you know why yeoman generators run the grunt concat task before uglifying? – Ubana

This question represents a misunderstanding in the distinction between concat and uglifying. When you concat 2 or more files together a new file is created. If you tried to uglify before concating then you would need to uglify n files and then concat all those files. It is far more efficient to concat them all and then just run uglify on the collective file. tldr; running uglify AFTER concat makes it so you only need to run uglify 1 time instead of n times – Apocrypha

Uglification is not necessarily for "hiding intent", it may just be to used to save space, converting aLongMethodName() to a() and variable names to shortened version as well. – Danube

Well, not only that. Imagine having library files that are called from another js file, if you first uglify the files separately and then concat them, your js files will no longer be able to reference the library, because the names in the library will be changed. So concat everything first and then uglify the result. – Adena

so, to be clear, if I were to minify a css file it'd still work like normal but when I uglify it I need to precompile my html as well? – Tripletail

Answer 2

Concatenation - Merges all the specified files to create a new single file.

Minification - It simply means all the unnecessary white spaces and redundant optional tokens will be removed.

Example - self.description = 'Hello'
Minified version will be - self.description='Hello'

Uglification - It simply means converting the code in such a format that core logic can't be understand easily. To do the same it renames the variable and their references, it renames the parameter with shorter name etc.It simply obfuscate the business logic so that no one can easily understands it.

Example -

self.description = 'Hello';
function(self.description){}

Uglified version will be -

  j.description = 'Hello';
  function(j.description){}

Old