工具/原料NodeJsWindows系统方法/步骤要使用Grunt，第一件事是安装Node.js。（即使你没用过Node.js也不用担心——你只需安装它让Grunt能运行。）安装了Node.js之后，用命令行工具执行以下命令：$npminstall-ggrunt-cli要确认Grunt是否正确安装，可以使用以下命令：$grunt--version下一步是在你的项目的根目录下创建package.json和gruntfile.js两个文件。创建package.json文件这个JSON文件让我们指定我们的开发环境所依赖的必须模块。有了它，项目的所有开发者都能保证安装上一致的必须模块，从而保证所有人拥有一样的开发环境。在项目根目录下的pacakge.json文件中写上：{"name":"SampleGrunt","version":"0.1.0","author":"BrandonRandom","private":true,"devDependencies":{"grunt":"~0.4.0"}}然后在命令行工具运行：$npminstall该命令告诉npm需要安装的必须模块，npm会安装它们，自动保存在项目根目录下一个叫做node_modules的文件夹里。创建gruntfile.js文件gruntfile.js文件本质上就是一个wrapper函数，接受grunt作为参数：module.exports=function(grunt){grunt.initConfig({pkg:grunt.file.readJSON('package.json')})grunt.registerTask('default',[])}现在你已经可以在项目根目录下运行grunt命令行工具了。$grunt>Task"default"notfound.Use--forcetocontinue.这里我们只指定了Grunt作为必须模块，还没定义任何任务。接下来我们就要指定任务和必须模块。首先来看如何拓展package.json文件。拓展package.json文件使用Node.js最好的一点，就是它可以根据package.json文件的内容，一次性查找和安装多个package。要安装我们项目的所有必须任务，只须在package.json文件中加上以下内容：{"name":"SampleGrunt","version":"0.1.0","author":"MikeCunsolo","private":true,"devDependencies":{"grunt":"~0.4.0","grunt-contrib-cssmin":"*","grunt-contrib-sass":"*","grunt-contrib-uglify":"*","grunt-contrib-watch":"*","grunt-cssc":"*","grunt-htmlhint":"*","matchdep":"*"}}那么如何实现安装？你肯定已经猜到了：$npminstall使用Grunt载入任务package安装好后，还必须被Grunt载入才能为我们所用。使用matchdep，我们用一行代码就可以自动载入所有任务。这是开发流程的一大优化，因为现在我们只须把必须任务列表写在package.json一个文件里，便于管理。在gruntfile.js里，grunt.initConfig之上，写上以下代码：require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks)要是没有matchdep，我们就必须为每一个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”)，随着我们使用的任务的增加，这些载入任务的代码很快就会变得相当繁冗。在Grunt载入这些任务前，我们还可以指定设置选项。现在我们需要创建我们的HTML文件（index.html）：EnteryourfirstnameEnteryourfirstname用HTMLHint验证HTML在grunt.initConfig里加入下列设置代码：htmlhint:{build:{options:{'tag-pair':true,'tagname-lowercase':true,'attr-lowercase':true,'attr-value-double-quotes':true,'doctype-first':true,'spec-char-escape':true,'id-unique':true,'head-script-disabled':true,'style-disabled':true},src:['index.html']}}一般来说，一个plugin的设置方法如下：plugin的名称（去掉grunt-contrib-或grunt-前缀），选择使用此plugin的一个或多个对象（在这里可以给不同文件设置此plugin的不同选项），一个选项object，以及plugin要作用的对象。现在，如果我们用命令行工具运行grunthtmlhint，该plugin就会检查我们在src里指定的HTML文件，验证其中有没有错误！但是每个小时都要手动运行几次这个任务，很快就让人觉得很繁琐了。自动化任务运行watch是一个特殊的任务，它可以在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入以下设置：watch:{html:{files:['index.html'],tasks:['htmlhint']}}然后，在命令行工具中运行gruntwatch命令。现在，你可以试试在index.html里加一行注释，保存文件。你会注意到，保存文件时会自动触发HTML的验证！这是对开发流程的一大优化：在你写代码时，watch任务就会默默同时为你验证代码，如果验证失败任务就会报告失败（它还会告诉你问题在哪）。注意gruntwatch任务会一直运行，直到命令行工具关闭，或手动停止（control+c在Mac中)。保持JavaScript极简让我们来写一个验证用户输入的名字的JavaScript文件。简便起见，我们这里只检查其中是否含有非字母的字符。我们的JavaScript会使用strict模式，这可以防止我们写可用但低质量的JavaScript。创建assets/js/base.js文件并在其中写上：functionValidator(){"usestrict"}Validator.prototype.checkName=function(name){"usestrict"return(/[^a-z]/i.test(name)===false)}window.addEventListener('load',function(){"usestrict"document.getElementById('firstname').addEventListener('blur',function(){var_this=thisvarvalidator=newValidator()varvalidation=document.getElementById('namevalidation')if(validator.checkName(_this.value)===true){validation.innerHTML='Looksgood!:)'validation.className="validationyep"_this.className="yep"}else{validation.innerHTML='Looksbad!:('validation.className="validationnope"_this.className="nope"}})})让我们用UglifyJS来极简化这个源代码，在grunt.initConfig中加上以下设置：uglify:{build:{files:{'build/js/base.min.js':['assets/js/base.js']}}}UglifyJS会替换所有的变量和函数名，剔除所有空白和注释，从而生成占据最小空间的JavaScript文件，对发布非常有用。同样地，我们需要设置一个watch任务来使用它，在watch的设置里加入以下代码：watch:{js:{files:['assets/js/base.js'],tasks:['uglify']}}9现在我们有了一个静态HTML页面，一个存放Sass和JavaScript源文件的assets文件夹，一个存放优化后的CSS和JavaScript的build文件夹，以及package.json文件和gruntfile.js文件。至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的，一个非常活跃的开发者社区在为Grunt开发前端plugin。我建议你现在就到pluginlibrary去看看那300个以上的plugin。

gruntfile.js可配置路径的读取方法：

一是通过自定义的task，接受命令行参数，并据此加以处理。

二是在运行任务之前，通过grunt.config.set('xx.', value)这样的方式，动态修改原来的配置。

举例：

module.exports = function (grunt) {

// Project configuration.

grunt.initConfig({

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

jasmine_node: {

options: {

matchall: false,

extensions: 'js',

specNameMatcher: '_spec'

},

// 对于grunt-jasmine-node而言，这里设置了目标文件夹

all: ['test/spec/']

}

})

grunt.loadNpmTasks('grunt-jasmine-node')

grunt.registerTask('default', ['jasmine_node'])

// 自定义一个task，运行方式：grunt spec:dir 或 grunt spec

grunt.registerTask('spec', 'run tests in specific dir', function(dir){

// 如果是grunt spec，dir的值为undefined，那么维持原设置不变

if (dir !== undefined) {

// 否则，修改jasmine-node的all选项

grunt.config.set('jasmine_node.all', ['test/spec/' + dir])

}

// 运行原来的task

grunt.task.run('jasmine_node')

})

}

---