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配置时，将在下一节中使用此设置。
在开发库和发布新版本时，您需要定期执行一些任务。例如，您可能希望确保您编写的代码符合最佳实践，或者您编写的代码不会导致意外行为。为此，您可以使用名为JSHint的工具。Grunt有一个官方插件，名为grunt-contrib-jshint，我们将在这个例子中采用它。特别是，您可能希望确保在修改代码时不会破坏任何规则或最佳实践。因此，一个好的策略是在每次执行的更改时检查代码。为此，我们将介绍一个名为grunt-contrib-watch的Grunt插件。后者运行预定义的任务，例如grunt-contrib-jshint，每当添加，更改或删除文件时。
使用谷歌翻译结
检查源代码是否遵循最佳实践是不足以保证它是稳定的并且不包含错误。要创建一个健壮的项目，您需要对其进行测试。您可以使用几个库，例如QUnit或Jasmine。在本指南中，我们将介绍如何配置QUnit，特别是grunt-contrib-qunit来测试代码。
在分发您的作品时，您希望提供尽可能小的版本。要创建缩小版本，您需要一个Grunt插件，如grunt-contrib-uglify。此外，除非您正在开发的项目非常小，否则您可能会将代码拆分为多个文件。虽然这对开发人员来说是一种很好的做法，但您希望用户只包含一个文件。因此，在缩小代码之前，您应该连接源文件以创建单个文件。要实现这一目标，您需要一个像grunt-contrib-concat这样的Grunt插件。
总而言之，在本指南中我们将使用以下五个Grunt插件：
如果您对最终结果看起来很好奇，Gruntfile可以在本页底部找到整个结果。
设置 Gruntfile
第一部分是“包装器”功能，它封装了您的Grunt配置。
module.exports = function(grunt) {
};在该函数中，我们可以初始化配置对象：
grunt.initConfig({
});接下来，我们可以将项目设置从package.json文件存储到pkg属性中。这允许我们引用package.json文件中的属性值，我们很快就会看到。
pkg: grunt.file.readJSON('package.json')到目前为止，这让我们留下了这个：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
};现在我们可以为我们提到的每个任务定义一个配置。插件的配置对象作为配置对象上的属性，通常与其插件共享相同的名称。为配置grunt-contrib-concat云在下的配置对象concat键，如下所示：
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'
}
}请注意上面的代码片段中我们如何引用name JSON 文件中的属性。我们通过使用pkg.name前面的方法来访问它，我们将pkg属性定义为加载package.json文件的结果，然后将其解析为 JavaScript 对象。Grunt 有一个简单的模板引擎，用于输出配置对象中的属性值。在这里，我们告诉concat任务连接存在于其中src/和结束的所有文件.js。
现在让我们配置grunt-contrib-uglify插件，它会缩小 JavaScript 代码：
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 %>']
}
}
}此片段告诉您grunt-contrib-uglify在其中创建一个文件dist/，其中包含缩小 JavaScript 文件的结果。这里我们使用<%= concat.dist.dest %>uglify 将缩小 concat 任务产生的文件。
到目前为止，我们已经配置了插件来创建库的分发版本。现在是时候使用grunt-contrib-qunit自动化代码测试了。为此，我们需要指定测试运行器文件的位置，这些文件是运行 QUnit 的HTML 文件。结果代码报告如下：
qunit: {
files: ['test/**/*.html']
},完成后，就可以设置配置以确保项目代码符合最佳实践。JSHint 是一个可以检测问题或潜在问题的工具，例如高圈复杂度，使用等于运算符而不是严格的相等运算符，以及未使用的变量和函数的定义。
我们建议您分析grunt-contrib-jshint项目的所有 JavaScript 文件，包括Gruntfile测试文件。配置示例grunt-contrib-jshint如下：
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
}
}
}这个插件获取一个文件数组，然后是一个选项对象。这些都记录在JSHint站点上。如果您对插件默认值感到满意，则无需在 Gruntfile 中重新定义它们。
剩下要配置的最后一个插件是grunt-contrib-watch。添加，删除或修改JavaScript文件后，我们将使用它来运行任务jshint和qunit任务。当它检测到指定的任何文件已更改时（这里，我们使用相同的文件告诉 JSHint 检查），它将按照它们出现的顺序运行您指定的任务。这可以在命令行上运行grunt watch。
将前面的描述转换为grunt-contrib-watch以下代码段中的结果配置：
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}有了这个片段，我们已经为介绍中提到的所有插件设置了配置。要执行的最后一步是加载我们需要的 Grunt 插件。所有这些应该先前通过 npm 安装。
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']);在Grunt未指定要执行的任务（grunt）的情况下调用时，将执行默认任务。
结果 Gruntfile
如果您已正确遵循本指南，则应具备以下条件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']);
};本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
