less/sass/stylus预编译
在前端工程中使用css预编译器（less/sass/stylus）用于弥补css的语言缺陷，基本上是标配了，其中less和sass用的最多，但明河最喜欢使用的是stylus，grunt官方有对应的编译插件。
这里以grunt-contrib-stylus为例。
stylus: {
options: {
//指定要扫描的目录（针对@import内的路径）
paths: [ 'src' ],
//指定将图片路径转成base64数据的函数（比如配置urlfunc:"embedurl"，扫描embedurl(test.png)）
urlfunc: 'embedurl' ,
import: [ // @import 'foo', 'bar/moo', 每一个.styl文件
'foo' ,
'bar/moo'
]
},
main: {
files: [
{
expand: true ,
cwd: 'src' ,
src: '*.styl' ,
dest: 'src' ,
ext: '.css'
}
]
}
}上述任务将src目录下的所有.styl文件编译成.css文件。
less，sass的编译插件用法类似，配置上有差异，sass推荐使用grunt-contrib-compass。
（PS:如果你使用webstrom或idea，其实不需要grunt来处理css的预编译，IDE已经内置处理了。）
如果每次修改完都要运行命令编译次，是非常麻烦的，所以我们还需要个实时监听插件grunt-contrib-watch，后面会讲到。
当然亲也可以使用一些编译工具，比如livereload（livereload非常强大，但win平台的软件很弱）和koala。
coffeescript编译
关于coffeescript的争议非常多，上次明河还听到facebook同学关于coffeescript的批评，在阿里技术论坛里也有过争论，不管如何coffeescript的确很诱人。
coffeescript有带了编译工具，可以满足实时编译需求，就是每次运行很麻烦，结合grunt使用，可以很好的消化coffeescript的编译成本（如果你使用webstrom，可以无视编译，已经自动处理鸟。）
grunt-contrib-coffee用法举例：
coffee: {
compile: {
options: {
//去掉匿名函数包裹
bare: true ,
//当编译多个.coffee文件成单个.js时，先合并
join: true ,
//编译.coffee文件时生成个.map文件，用于链接到coffee源码文件
sourceMap: true
},
files:[
{
expand: true ,
cwd: 'src' ,
src: [ '**/*.coffee' ],
dest: 'src' ,
ext: '.js'
}
]
}
}实时监听插件
grunt-contrib-watch非常重要，它能监测文件的修改，触发指定任务，比如less、coffee编译等。
先来看个最简单的demo：
watch: {
options: {
spawn: false
},
scripts: {
files: [ '<%= pkg.version %>/**/*.coffee' ],
tasks: [ 'coffee' ]
}
}监听源码目录下所有的.coffee文件的修改，触发coffee任务（编译coffee文件）。
spawn配置一般禁掉，设置为true时，运行任务会开启子进程处理，可能会出现不稳定的问题。
files：监听哪些文件的修改
tasks：文件修改后触发哪些任务
coffee: {
compile: {
options: {
//去掉匿名函数包裹
bare: true
},
files:[
{
expand: true ,
cwd: '<%= pkg.version %>' ,
src: [ '**/*.coffee' ],
dest: '<%= pkg.version %>' ,
ext: '.js'
}
]
}
}grunt.registerTask( 'w' ,[ 'watch:scripts' ]);
运行grunt w后，没有报错的情况下，随便修改个coffee文件，会出现类似如下结果：
（PS:registerTask的name不能和task的名称重复，不然会出现死循环，比如这里不能grunt.registerTask(‘watch’]);）
grunt-contrib-watch拥有丰富的配置，一般采用默认配置即可，grunt-contrib-watch可以结合livereload插件使用，可以实现文件发生改变后刷新页面，这个功能很有意思。
grunt.initConfig({
watch: {
options: {
livereload: true ,
},
css: {
files: [ 'public/scss/*.scss' ],
tasks: [ 'compass' ],
},
},
});livereload会开启个服务器，默认端口号为35729。
在页面中引入监控脚本：
< script src = "http://localhost:35729/livereload.js" ></ script >或者安装livereload的浏览器插件。
图片压缩工具插件
grunt-contrib-imagemin，能够快速的压缩工程内的图片，非常实用的前端工具，用法非常简单：
imagemin: {
dynamic: {
files: [{
expand: true ,
cwd: 'src/' ,
src: [ '**/*.{png,jpg,gif}' ],
dest: 'dist/'
}]
}
}yuidoc文档生成插件
grunt-contrib-yuidoc：基于YUIDOC生成js API文档
yuidoc: {
compile: {
name: '<%= pkg.name %>' ,
description: '<%= pkg.description %>' ,
version: '<%= pkg.version %>' ,
url: '<%= pkg.homepage %>' ,
options: {
paths: 'path/to/source/code/' ,
themedir: 'path/to/custom/theme/' ,
outdir: 'where/to/save/docs/'
}
}
}paths：js源码位置；
themedir：文档模板位置；
outdir：文档输出位置。
karma单测回归插件
grunt-karma：是karma的grunt插件版，webstrom内置karma回归功能。
demo：
karma: {
unit: {
configFile: 'karma.conf.js'
}
}会寻找karma.conf.j配置文件。