grunt入门讲解4：如何创建task(任务) - chaojidan - 博客园
每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情。
如果你没有指定一个任务，并且你已经定义一个名为 "default" 的任务，那么该任务将会默认被执行。
如果指定了一个任务列表taskList，新任务名taskName将是这一个或多个指定任务的别名。当运行此 "任务别名" 时，在taskList&中指定的每个任务都会按照其出现的顺序依次执行。taskList参数必须是一个任务数组。grunt.registerTask(taskName, taskList)
举个例子：
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
上面的任务别名案例中定义了一个 'default' 任务，如果运行Grunt时没有指定任何任务，它将自动执行'jshint'、'qunit'、'concat' 和 'uglify' 任务。
还可以给任务指定参数。在下面的例子中，别名 "dist" 将执行 "concat" 和 "uglify" 两个任务，并且它们都带有一个 "dist" 参数：
grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);
当运行一个多任务时，Grunt会自动从项目的配置对象中查找同名属性。多任务可以有多个配置，并且可以使用任意命名的'targets'。举个例子：
grunt.initConfig({
foo: [1, 2, 3],
bar: 'hello world',
baz: false
grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target + ': ' + this.data);
如果通过grunt log:foo运行Grunt，它会输出foo: 1,2,3；如果通过grunt log:bar来运行Grunt， 它会输出bar: hello world。然而如果通过grunt log运行Grunt, 它会输出foo: 1,2,3，然后是bar: hello world，最后是baz: false(任务目标会按照指定的顺序进行处理)。
"基本" 任务
当一个基本任务执行时，Grunt并不会检查配置和环境 -- 它仅仅执行指定的任务函数，并传递任何使用冒号分割的参数作为函数的参数。举个例子：
grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln(this.name + ", no args");
grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
如果执行&grunt foo:testing:123，将输出日志&foo, testing 123。 如果执行这个任务时不传递参数，只是执行&grunt foo，那么将输出日志&foo, no args。
自定义任务
如果你的任务没有遵循 "多任务" 结构，那就可以使用自定义任务。比如：
grunt.registerTask('default', 'My "default" task description.', function() {
grunt.log.writeln('Currently running the "default" task.');
任务的其他特性
在一个任务内部，你可以执行其他的任务。比如：
grunt.registerTask('foo', 'My "foo" task.', function() {
// Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
grunt.task.run('bar', 'baz');
grunt.task.run(['bar', 'baz']);
任务也可以是异步的。比如：
grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {
// Force task into async mode and grab a handle to the "done" function.
var done = this.async();
// Run some sync stuff.
grunt.log.writeln('Processing task...');
// And some async stuff.
setTimeout(function() {
grunt.log.writeln('All done!');
任务也可以访问它们自身名称和参数。比如：
grunt.registerTask('foo', 'My "foo" task.', function(a, b) {
grunt.log.writeln(this.name, a, b);
// grunt foo
logs: "foo", undefined, undefined
// grunt foo:bar
logs: "foo", "bar", undefined
// grunt foo:bar:baz
logs: "foo", "bar", "baz"
如果任务在执行时记录到任何错误，那么任务就会失败。当任务失败时，所有的后续任务都将终止。比如：
grunt.registerTask('foo', 'My "foo" task.', function() {
return false;
grunt.registerTask('bar', 'My "bar" task.', function() {
// 如果"foo"任务运行失败或者没有运行则任务失败。
grunt.task.requires('foo');
// 如果"foo"任务运行成功则执行这里的代码。
grunt.log.writeln('Hello, world.');
// grunt foo bar
没有输出，bar任务没有运行，因为"foo"失败，所以它后面的任务都将终止运行。
// grunt bar
没有输出，bar任务运行，但运动到一半就停止了，因为"foo"从未运行，所以foo任务失败，失败后，bar任务也就停止了，因此没有输出。
注意 grunt.task.requires 并不会真正的运行其他任务，它仅仅检查其它任务是否已经执行，并且没有失败。
任务还可以访问配置属性。比如：
grunt.registerTask('foo', 'My "foo" task.', function() {
// 记录属性值，如果属性未定义（undefined）则返回null。
grunt.log.writeln('The meta.name property is: ' + grunt.config('meta.name'));
// 同样的记录属性值，如果属性未定义（undefined）则返回null。
grunt.log.writeln('The meta.name property is: ' + grunt.config(['meta', 'name']));
如果任务需要的配置属性不存在，其也会失败。比如：
grunt.registerTask('foo', 'My "foo" task.', function() {
// 如果缺少"meta.name"配置属性则任务失败。
grunt.config.requires('meta.name');
// 如果缺少"mata.name"配置属性则任务同样失败。
grunt.config.requires(['meta', 'name']);
// 根据情况记录日志。
grunt.log.writeln('This will only log if meta.name is defined in the config.');
为什么我的异步task没有完成？如果发生这种情况，可能是由于你忘记调用 this.async 方法来告诉Grunt你的任务是异步的。为了简单起见，Grunt使用同步的编码风格，可以在task体中通过调用 this.async() 将其转换为异步的。
注意，传递 false 给 done() 函数就会告诉Grunt你的任务已经失败。
grunt.registerTask('asyncme', 'My asynchronous task.', function() {
var done = this.async();
setTimeout(function() {Grunt教程——Gurnt任务的配置
Gruntfile.js创建
假设您已经在你的系统中创建了一个Grunt项目“my-grunt”。要正常的运行这个Grunt项目，其中package.json和Gruntfile.js是必不可少的，而且它们都必须位于Grunt项目的根目录之下。
你可以通过在你的终端下执行下面的命令（注，这里是Mac环境下操作的）：
$ mkdir my-grunt
$ touch package.json Gruntfile.js
此时，在“my-grunt”项目的根目录下就创建了两个空文件：package.json和Gruntfile.js:
这样就完成了Gruntfile.js文件创建，这也是创建Gruntfile.js文件最简单的方法。除了这种方法之外，我们还可以通过方法来创建。接下来我们简单的一起来过一下如何使用grunt-init创建Gruntfile.js文件。
首先你需要先安装,如果还没有安装，在终端执行下面的命令：
$ npm install -g grunt-init
有的系统上面的命令安装会失败，如果失败了不用太过担心，你只要加上一个sudo就OK了，
$ sudo npm install -g grunt-init
这个时候，在命令终端你会看到一串这样的信息结尾，就表示你安装grunt-init:
npm http 200 https://registry.npmjs.org/request
/usr/local/bin/grunt-init -& /usr/local/lib/node_modules/grunt-init/bin/grunt-init
grunt-init@0.2.1 /usr/local/lib/node_modules/grunt-init
├── semver@1.0.14
├── colors@0.6.2
├── hooker@0.2.3
├── grunt@0.4.1 (which@1.0.5, dateformat@1.0.2-1.2.3, eventemitter2@0.4.13, async@0.1.22, lodash@0.9.2, coffee-script@1.3.3, underscore.string@2.2.1, iconv-lite@0.2.11, minimatch@0.2.12, glob@3.1.21, rimraf@2.0.3, findup-sync@0.1.2, nopt@1.0.10, js-yaml@2.0.5)
└── prompt@0.1.12 (async@0.1.22, pkginfo@0.3.0, winston@0.5.11)
至于这一大串信息是什么意思，我也不懂，先不管了，知道安装成功就行了。一旦grunt-init安装成功，你的系统下~/.grunt-init目录来放置模板地方。所以建议你使用git将Gruntfile文件模板克隆到这个目录下：
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
如果使用的系统是Windows，那么你可以参考这里的来创建。
执行完上面的命令之后，你可以在~/.grunt-init目录下多了一个gruntfile目录：
~/.grunt-init
$ cd gruntfile
template.js
这个时候在终端上进入到项目“my-grunt”目录下，执行：
$ grunt-init gruntfile
终端会开始以提问的方式与你交互创建Gruntfile.js文件：
Running "init:gruntfile" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
"gruntfile" template notes:
This template tries to guess file and directory paths, but you will most likely
need to edit the generated Gruntfile.js file before running grunt. If you run
grunt after generating the Gruntfile, and it exits with errors, edit the file!
Please answer the following:
[?] Is the DOM involved in ANY way? (Y/n)
我一路下来：
Please answer the following:
[?] Is the DOM involved in ANY way? (Y/n) n
[?] Will files be concatenated or minified? (Y/n) n
[?] Will you have a package.json file? (Y/n) y
[?] Do you need to make any changes to the above before continuing? (y/N) n
Writing Gruntfile.js...OK
Initialized from template "gruntfile".
Done, without errors.
这样就完成了Gruntfile.js文件创建，不过这种方式创建出的文件和手工创建的不一样，文件中有一定的内容：
module.exports = function(grunt) {
grunt.initConfig({
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
globals: {}
gruntfile: {
src: 'Gruntfile.js'
lib_test: {
src: ['lib/**/*.js', 'test/**/*.js']
nodeunit: {
files: ['test/**/*_test.js']
gruntfile: {
files: '&%= jshint.gruntfile.src %&',
tasks: ['jshint:gruntfile']
lib_test: {
files: '&%= jshint.lib_test.src %&',
tasks: ['jshint:lib_test', 'nodeunit']
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint', 'nodeunit']);
简单化一下，Gruntfiles.js文件将长成这屌样子：
module.exports = function(grunt) {
grunt.initConfig({
grunt.loadNpmTasks('grunt任务插件名');
grunt.registerTask('default', ['任务名']);
文件搞定后，我们更关心的是怎么在这个文件中配置我们需要的任务。接下来，我们一起来了解他的配置。
“Wrapper”函数
每个Gruntfile.js和Grunt插件都使用这个基本格式，前且所有你的Grunt代码都必须指定在这个函数里面：
module.exports = function(grunt){
Grunt的任务配置都是在你的Gruntfile.js文件中的grunt.initConfig({})方法中指定。这个配置主要都是一些命名任务属性(通常任务都被定义为一个对象给grunt.initConfig({})方法，而任务都是作为这个对象的属性定义的)，也可以包含任意其他数据。但这些属性（其他属性）不能与你的任务所需要的属性相冲突，否则它将被忽略(一般情况下任务中的属性名都是约定俗成的)。
此外，由于这本身就是JavaScript，因此你不仅限于使用JSON；你可以在这里使用任何有效的JavaScript。必要的情况下，你甚至可以以编程的方式生成配置(比如通过其他的程序生成一个或多个任务配置)。
grunt.initConfig({
my_property: 'whatever',
my_src_file: ['foo/*.js', 'bar/*.js']
项目和任务配置
前面说过，大多数Grunt任务所依赖的配置数据都被定义在传递给方法的一个对象中。
我们先来看一个简单的例子，为了实现示例中的功能，需要先完善package.json文件的内容，如下所示：
"name": "my-grunt",
"version": "0.1.0",
"description": "this is test project with grunt.",
"author": "airen",
"license": "BSD",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "*"
如果你不知道如何创建package.json文件，建议你先阅读前面的《》一文，你将会有一个初步的了解，在下一节中，我们将会对package.json文件做一个较为详细的阐述。
在这个示例中，grunt.file.readJSON('package.json')会把存储在package.json中的JSON元素数据导入到Grunt配置中。由于&%
%&模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作(比如我们通常需要通过复制粘贴的方式来在不同的地方引用同一个属性，使用&%
%&的方式可以简单的理解为将某些特定的数据存储在变量中，然后在其他地方像使用变量一样就可以使用这些数据属性)。
与大多数任务一样，插件的uglify任务要求它的配置被指定在一个同名属性中。在这里有一个例子，我们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接都会是一个单一的名为build的uglify目录，用于将一个js文件压缩为一个目标文件(比如将src/js目录下的jquery-1.9.0.js压缩为jquery-1.9.min.js，然后存储到dest/js目录)。
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today("yyyy-mm-dd") %& */\n'
src: 'src/js/&%= pkg.name %&.js',
dest: 'build/js/&%= pkg.name %&.min.js'
任务配置和目标
当运行一个任务时，Grunt会自动查找配置对象中的同名属性。多个任务可以有多个配置，每个任务可以使用任意的命名“targets”来自定义多个任务目标。在上面的示例中，添加Sass任务：
//Wrapper函数
module.exports = function(grunt) {
// 配置项目
grunt.initConfig({
// 配置任务
pkg:grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today("yyyy-mm-dd") %& */\n'
src: 'src/js/&%= pkg.name %&.js',
dest: 'build/js/&%= pkg.name %&.min.js'
options: {
style: 'compressed'
expand: true,
cwd: 'src/styles/sass/',
src: ['*.scss'],
dest: 'build/styles/css',
ext: '.css'
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true
expand: true,
cwd: 'src/styles/sass/',
src: ['*.scss'],
dest: 'build/styles/css',
ext: '.css'
在示例当中，sass任务有两个字任务dist和dev。在命令行中执行grunt
sass:dist或者grunt sass:dev的任务和目标只会处理指定的任务目标配置，而运行grunt
sass将遍历所有的(定义在sass任务中的)目标并依次处理。注意，如果一个任务使用重命过，Grunt将在配置对象中查找新的任务名称属性。
加载Grunt插件和任务
许多常用的任务像,和都被作为插件来使用。只要一个插件被作为一个依赖指定在项目的package.json文件中，并且已经通过npm
install安装好，都可以在你的Gruntfile.js文件中使用下面这个简单的命令启用它（所依赖的任务）。
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
设置默认任务
在Gruntfile.js文件中，你可以通过定义一个default任务来配置Grunt,让它默认运行一个或者多个任务。在下面的例子中，在命令中运行grunt而不指定特定的任务将自动运行uglify、sass任务。这个功能与显示的运行grunt
uglify和grunt sass或者等价运行grunt
default一样。你可以在任务参数数组指定任意数量的任务(这些任务可以带参数，也可以不带参数)。
grunt.registerTask('default', ['uglify','sass']);
自定义任务
如果你的项目所需的任务没有对应的Grunt插件提供相应的功能，你可以在Grunt内定义自定义的任务。例如，下面的Gruntfile就定义了一个完整的自定义的default任务，它甚至没有利用任务配置(没有使用grunt.initConfig({})方法)：
module.exports = function(grunt){
grunt.registerTask('default','Log some stuff.',function(){
grunt.log.write('Logging some stuff...').ok();
自定义的项目特定的任务可以不定义在Gruntfile.js中；它可以定义在一个外部.js文件中，然后通过方法来加载。
在一个任务配置中,options属性可以用来指定覆盖内置属性的默认值。此外，每一个任务目标中更具体的目标都可以拥有一个options属性。目标级的选项将会覆盖任务级的选项（就近原则——options离目标越近，其优先级越高）。
options对象是可选，如果不需要，可以省略。
grunt.initConfig({
options: {
options: {
由于大多的任务都是执行文件操作，Grunt有一个强大的抽象声明说明任务应该操作哪些文件。这里有好几种定义src-dest(源文件——目标文件)文件映射的方式，都提供了不同程度的描述和控制操作方式。任何一种多任务(包含多个任务目标的任务)都能理解下面的格式，所以你只需要选择满足你需要的格式就行。
所有的文件格式都支持src和dest属性。
这种形式允许每个目标对应一个src-dest文件映射。通常情况下它用于只读任务，比如,它就只需要一个单一的src属性，而不需要关联的dest选项。这种格式还支持给每个src-dest文件映射指定附加属性。
.initConfig({
src: ['src/js/a.js','src/js/aa.js']
文件对象格式
这种形式支持每个任务目标对就多个src-dest形式的文件映射，属性名就是目标文件，源文件就是它的值（源文件列表则使用数组格式声明）。可以使用这种方式指定数个src-dest文件映射，但是不能够给每个映射指定附加的属性。
.initConfig({
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js']
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
'dest/b1.js': ['src/bb1.js', 'src/bbb1.js']
文件数组格式
这种形式支持每个任务目标对应多个src-dest文件映射，同时也允许每个映射拥有附加属性：
.initConfig({
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}
{src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
{src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'}
较老的格式
dest-as-target文件格式在多任务和目标形式出现之前是一个过渡形式，目标文件路径实际上就是目标名称。遗憾的是, 由于目标名称是文件路径，那么运行grunt
task:target可能不合适。此外，你也不能指定一个目标级的options或者给每个src-dest文件映射指定附加属性。
.initConfig({
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/b.js': ['src/bb.js', 'src/bbb.js']
自定义过滤函数
filter属性可以给你的目标文件提供一个更高级的详细帮助信息。只需要使用一个有效的方法名。下面的配置仅仅清理一个与模式匹配的真实的文件：
.initConfig({
src: ['temp/**/*'],
filter: 'isFile'
或者创建你自己的filter函数根据文件是否匹配来返回true或者false。下面的例子将仅仅清理一个空目录:
.initConfig({
src: ['temp/**/*'],
filter: function(filepath){
return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0);
通配符模式
原文档标题为Globbing patterns，大意是指使用一些通配符形式的匹配模式快速的匹配文件。
通常分别指定所有源文件路径的是不切实际的(也就是将源文件-目标文件一一对应的关系列出来)，因此Grunt支持通过内置的和库来匹配文件名(又叫作globbing)。
当然这并不是一个综合的匹配模式方面的教程，你只需要知道如何在文件路径匹配过程中使用它们即可：
大多数的人都知道foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件,
而foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件。
此外, 为了简化原本复杂的通配符模式，Grunt允许指定一个数组形式的文件路径或者一个通配符模式。模式处理的过程中，带有!前缀模式不包含结果集中与模式相配的文件。
而且其结果集也是唯一的。
//可以指定单个文件
{src: 'foo/this.js', dest: …}
//或者指定一个文件数组
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: …}
//或者使用一个匹配模式
{src: 'foo/th*.js', dest: …}
//一个独立的node-glob模式
{src: 'foo/{a,b}*.js', dest: …}
//也可以这样编写
{src: ['foo/a*.js', 'foo/b*.js'], dest: …}
//foo目录中所有的.js文件，按字母排序
{src: ['foo/*js'], dest: …}
//这里首先是bar.js，接着是剩下的.js文件按字母排序
{src: ['foo/bar.js', 'foo/*.js'], dest: …}
//除bar.js之外的所有的.js文件，按字母排序
{src: ['foo/*.js', '!foo/bar.js'], dest: …}
//所有.js文件按字母排序, 但是bar.js在最后.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: …}
//模板也可以用于文件路径或者匹配模式中
{src: ['src/&%= basename %&.js'], dest: 'build/&%= basename %&.min.js'}
//它们也可以引用在配置中定义的其他文件列表
{src: ['foo/*.js', '&%= jshint.all.src %&'], dest: …}
可以在和文档中查看更多的关于通配符模式的语法。
构建动态文件对象
当你希望处理大量的单个文件时，这里有一些附加的属性可以用来动态的构建一个文件. 这些属性都可以指定在Compact和Files
Array映射格式中(这两种格式都可以使用)。
在下面的例子中，minify任务将在static_mappings和dynamic_mappings两个目标中查看相同的src-dest文件映射列表,
这是因为任务运行时Grunt会自动展开dynamic_mappings文件对象为4个单独的静态src-dest文件映射--假设这4个文件能够找到。
可以指定任意结合的静态src-dest和动态的src-dest文件映射。
grunt.initConfig({
static_mappings: {
{src: 'lib/a.js', dest: 'build/a.min.js'},
{src: 'lib/b.js', dest: 'build/b.min.js'},
{src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
{src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'}
dynamic_mappings: {
expand: true,
cwd: 'lib/',
src: '**/*.js',
dest: 'build/',
ext: '.min.js'
使用&% %&分隔符指定的模会在任务从它们的配置中读取相应的数据时将自动扩展扫描。模板会被递归的展开，直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。
整个配置对象决定了属性上下文(模板中的属性)。此外，在模板中使用grunt以及它的方法都是有效的，例如：&%=
grunt.template.today('yyyy-mm-dd') %&。
下面提供了一个concat任务配置示例，运行grunt
concat:sample时将通过banner中的/* abcde */连同foo/*.js+bar/*.js+bar/*.js匹配的所有文件来生成一个名为build/abcde.js的文件。
grunt.initConfig({
options: {
banner: '/* &%= baz %& */\n' // '/* abcde */\n'
src: ['&%= qux %&', 'baz/*.js'], // [['foo/*js', 'bar/*.js'], 'baz/*.js']
dest: 'build/&%= baz %&.js'
//用于任务配置模板的任意属性
bar: 'b&%= foo %&d', //'bcd'
baz: 'a&%= bar %&e', //'abcde'
qux: ['foo/*.js', 'bar/*.js']
导入外部数据
在下面的Gruntfile中，项目的元数据是从package.json文件中导入到Grunt配置中的，并且插件的uglify任务被配置用于压缩一个源文件以及使用该元数据动态的生成一个banner注释。
Grunt有grunt.file.readJSON和grunt.file.readYAML两个方法分别用于引入JSON和YAML数据。
.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
banner: '/* &%= pkg.name %& &%= grunt.template.today("yyyy-mm-dd") %& */\n'
src: 'src/&%= pkg.name %&.js',
dest: 'dist/&%= pkg.name %&.min.js'
到此，Grunt的任务配置相关的知识都已涉及到了，但不同的Grunt的任务其配置都略有不同，不过针对不同的插件任务配置，可以查阅每个的说明文档。
对于初学者来说，或许上面的内容有很多都理解不过来，其实我也一样，不过不用担心，当你看得多，做得多，到一定的时候自然就整得明白是怎么一回事。现在我们返回到示例中。根据上面的内容，给"my-grunt"项目创建了grunt-contrib-uglify和grunt-contrib-sass两个任务，并且完成了一些简单的配置：
module.exports = function(grunt) {
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today("yyyy-mm-dd") %& */\n'
src: 'src/js/&%= pkg.name %&.js',
dest: 'build/js/&%= pkg.name %&.min.js'
options: {
style: 'compressed'
expand: true,
cwd: 'src/styles/sass/',
src: ['*.scss'],
dest: 'build/styles/css',
ext: '.css'
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true
expand: true,
cwd: 'src/styles/sass/',
src: ['*.scss'],
dest: 'build/styles/css',
ext: '.css'
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['uglify','sass']);
仅这样Grunt不会自动执行任何任务，因为我们只完成了配置，但没有安装Grunt里面的任务。如果你需要安装，只需要在命令终端执行：
$ npm install
在终端中，看到下面这样的结束信息，表示安装成功：
grunt-contrib-uglify@0.2.5 node_modules/grunt-contrib-uglify
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── uglify-js@2.4.3 (uglify-to-browserify@1.0.1, async@0.2.9, optimist@0.3.7, source-map@0.1.31)
同时在项目的根目录下会自生成一个node_modules目录，而且在Grunt中配置的相关的任务都放在这个目录中。
在整个项目中，uglify任务是用来压缩项目中.js文件，sass任务是用来编译项目中的.scss文件。为了证明我们创建的任务是正确的，我们在项目中创建一个js文件和.scss文件来检验是否成功。并且将.js文件放置在src/js目录下，.scss文件放置在src/styles/sass目录下。同时我们创建两测试文件：my-grunt.js和main.scss。
//my-grunt.js
(function($){
var str = "&hello grunt!&";
$("body").append(str);
})(jQuery)
background-color: $bgColor;
.container {
margin: ($unit / 3)
width: $unit * 3;
注：因为我们uglify任务中使用是&%
pk.name %&模板，而这里面的name对应的就是package.json中的name参数。因此需要创建一个my-grunt.js。
你要执行Grunt任务的时候，只需要在命令行中执行：
这个时候，你在终端可以看到对应的信息：
Running "uglify:build" (uglify) task
File "build/js/my-grunt.min.js" created.
Running "sass:dist" (sass) task
Running "sass:dev" (sass) task
Done, without errors.
同时项目自动会生成一个名叫build的目录，而压缩的.min.js文件对应放置在build/js目录下;编译出来的.css放置在build/style/css下：
因为我们在Grunt中配置了默认任务，如果没有设置默认任务，必须需要单独执行：
$ grunt uglify
$ grunt sass
本文主要向大家介绍了Grunt项目中Gruntfile.js文件的配置以及如何在这个文件中配置对应的任务。并且详细介绍了配置任务中的一些参数与细节的使用。最后通过一个简单示例，向大家介绍了如何使用Grunt配置任务。虽然文章中有很多部分对于初学者来说理解有一定难度，但我相信，随着时间的推移，会慢慢搞懂文章中介绍的所有知识。最后希望本文对初学者有所帮助
没有更多推荐了，}