了解基本的grunt文件 - uglify

时间:2015-12-18 09:24:26

标签: javascript gruntjs

我是咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜它很好地编译和自我解释,除了我很难理解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 %>']
        }
      }
    },

我的意思是line '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'只是没有意义,我相信文档确实说grunt使用某种模板语言,有人可以向我解释上述内容吗?

2 个答案:

答案 0 :(得分: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",

答案 1 :(得分:1)

通常,在每个缩小文件上方添加注释以指示包名称,构建信息和额外信息是一种很好的做法。

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 %>将映射到&#39; name&#39;在package.json文件中。