Gruntfile 实例

在这个页面中，我们将引导您完成一个Gruntfile涵盖简单项目的常规需求的创建。如果你已经知道如何设置一个Gruntfile并且你正在寻找一个快速的例子，那么这里有一个：

module.exports = function(grunt) {

  grunt.initConfig{
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  }

  grunt.loadNpmTasks('grunt-contrib-jshint'
  grunt.loadNpmTasks('grunt-contrib-watch'

  grunt.registerTask('default', ['jshint']

};

要求

每个项目都有自己的需求，但大多数都有一些共同点。在本指南中，我们向您介绍一些Grunt插件，以自动化基本要求。最终目标是教你如何配置这些Grunt插件，以便在项目中使用它们。

为了举例，我们假设您正在创建一个JavaScript库。典型的文件夹结构具有以下文件夹：src，dist，和test。该src文件夹（有时称为app）包含库的源代码在创作它。该dist文件夹（有时称为build）包含分发，源代码的缩小版本。缩小文件是删除所有不必要字符（如空格，换行，注释）而不影响源代码功能的文件。缩小的源代码对项目用户特别有用，因为它减少了需要传输的数据量。最后，testfolder包含测试项目的代码。创建Gruntfile配置时，将在下一节中使用此设置。

grunt-contrib-uglify

module.exports = function(grunt) {
};

在该函数中，我们可以初始化配置对象：

grunt.initConfig{
}

pkg: grunt.file.readJSON('package.json')

module.exports = function(grunt) {
  grunt.initConfig{
    pkg: grunt.file.readJSON('package.json')
  }
};

concat: {
  options: {
    // define a string to put between each file in the concatenated output
    separator: ';'
  },
  dist: {
    // the files to concatenate
    src: ['src/**/*.js'],
    // the location of the resulting JS file
    dest: 'dist/<%= pkg.name %>.js'
  }
}

uglify: {
  options: {
    // the banner is inserted at the top of the output
    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: {
  // define the files to lint
  files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  // configure JSHint (documented at http://www.jshint.com/docs/)
  options: {
    // more options here if you want to override JSHint defaults
    globals: {
      jQuery: true,
      console: true,
      module: 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'

// this would be run by typing "grunt test" on the command line
grunt.registerTask('test', ['jshint', 'qunit']

// the default task can be run just by typing "grunt" on the command line
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']

结果 Gruntfile

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

};