理解基本的Grunt文件-uglify

Question

我是一个grunt的新手，我正在学习入门指南这里。它编写得相当好，并且自我解释，除了我在gruntFile中有一段代码不太理解，请看下面的grunt文件：

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']);

};

我不太理解下面的代码行：

我不太理解下面的代码行：

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

我指的是这一行代码 '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' 看起来毫无意义，我相信文档中提到了grunt使用某种模板语言，有人可以解释一下上述代码吗？

- Tenali_raman

---

我会将其发布为评论，因为显然在解释方面缺乏：这些参数丑化以向您的js文件添加一个横幅，在注释中提到包名称和当前日期。 - Aaron

@Aaron 谢谢老兄，但我仍然不完全明白最终结果会是什么样子。不过还是给你点赞！ - Tenali_raman

Answer 1

横幅将在您的压缩JavaScript文件上方生成一条注释。

例如，如果您的包名称为foobar，则设置如下：

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

这将导致在 foobar.min.js 的顶部出现此注释行：

/*! foobar 18-12-2015 */

包名(pkg.name)是在package.json中定义的名称:

"name": "foobar",

- piscator

Answer 2

通常，为了指示包名称、构建信息和额外信息，最好在每个压缩文件上方添加注释。

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

我相信文档中说grunt使用某种模板语言？

config.get方法（许多任务使用）自动扩展在Gruntfile中作为配置数据指定的<% %>样式模板字符串。

您看到的erb标记是指grunt模板系统，grunt.template.today是一个辅助函数，而<%= pkg.name %>将映射到package.json文件中的“name”。

- Tomas Ramirez Sarduy