Understanding basic grunt file - uglify

Question

I am a newbiew to grunt , I was just going through the starting guide HERE. its pretty well compiled and self explanatory , except I have a difficulty understanding a piece of code in the gruntFile, see the below grunt file:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

I am not quite understanding the below lines of code:

 uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },

I mean this line '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' just does't make sense , I believe the documentation does say that grunt uses some kind of a templating language , can somebody explain the above lines to me please?

Answer 1

Generally its good practice to add comments above every minified file to indicate the package name, build information and extra information.

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
       banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
    } ...
  }
});

I believe the documentation does say that grunt uses some kind of a templating language?

The config.get method (used by many tasks) automatically expands <% %> style template strings specified as config data inside the Gruntfile.

The erb tags that you see refers to grunt template system, the grunt.template.today is a helper function while <%= pkg.name %> will map to 'name' in package.json file.

Answer 2

The banner will result in a comment above your minified javascript file.

For example, if your package name is foobar, the setting:

banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'

will result in this comment line at the top of foobar.min.js:

/*! foobar 18-12-2015 */

The package name (pkg.name) is the name you define in package.json:

"name": "foobar",