Grunt-contrib-watch
安装：npm install grunt-contrib-watch --save-dev
Settings 设置
files
类型：字符串/数组
定义当前任务监控的问价类型，可以是一个字符串（文件名）或一个文件数组或minimatch模式。
tasks
类型：字符串/数组
定义当一个监测文件事件发生时运行哪个任务
options.spawn
是否生成任务运行在一个子进程中。设置这个选项为false会加速watch的反映速度（通常能增快500ms）而且允许后续任务运行共享相同的上下文。不生成任务运行会让watch更容易失败，所以还是按需使用。
watch: {
scripts: {
files: ['**/*.js'],
tasks: ['jshint'],
options: {
spawn: false,
},
},
},
options.interrupt
类型：布尔值 默认：false
当文件被修改时这个检测任务将生成任务在子进程中。默认的行为只在先前的进程结束后，为每个目标（target）只生成一个子进程。设置interrupt选项为true来终止先前的进程，生成一个新的给后续的变化。
watch: {
scripts: {
files: '**/*.js',
tasks: ['jshint'],
options: {
interrupt: true,
},
},
},
options.debounceDelay
类型：整型 默认：500
连续释放相同路径和状态的事件之前等待的时间。比如，你的Gruntfile.js文件发生了改变，一个改变（changed）事件，只有经过给定的毫秒数后，才能再次触发。
options.interval
类型：整型 默认：100
传递给fs.watchFile的间隔。建议忽略这个选项，默认为100ms。
options.event
类型：字符串/数组 默认：‘all’
指定触发指定任务的watch事件的类型。这个选项可以是一个或多个：'all','changed','added'和'deleted'。
watch: {
scripts: {
files: '**/*.js',
tasks: ['generateFileManifest'],
options: {
event: ['added', 'deleted'],
},
},
},
options.forever
类型：布尔型 默认：true
这只是一个任务级别的选项，不能配置目标。默认情况下，watch任务会躲避grunt.fatal和grunt.warn将它们与现有的watch进程阻隔开。如果你不想grunt.fatal和grunt.warn被覆盖设置forever选项为false。
options.dateFormat
类型：函数
这是知识一个任务级别的选项，不能配置目标。默认当watch结束运行任务时，它会显示消息：Completed in 1.301s at Thu Jul 18 2013 14:58:21 GMT-0700 (PDT) - Waiting....
如下图：
你可以应用自己的函数来覆盖这个消息：
watch: {
options: {
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
},
},
scripts: {
files: '**/*.js',
tasks: 'jshint',
},
},
options.atBegin
类型：布尔型 默认：false
这个选项触发每个指定的任务运行在监视器启动时。
options.livereload
类型：布尔型|Number|对象 默认：false
设置为true或livereload: 1337一个端口号会开启实时重载。默认并且建议的端口是35729。
如果开启，一个实时重载服务器将会启动和每个watch任务的每个目标。当任务已经启动后，实时重载服务器将会触发当文件修改时。
watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
},
},
},
例子：
Gruntfile.js文件
//简单的配置，当test.js文件发生改变时运行jshint
1 module.exports = function(grunt){ 2 grunt.initConfig({ 3 watch: { 4 files: ['test.js'], 5 tasks: ['jshint'] 6 }, 7 jshint: { 8 files: ['test.js'] 9 } 10 }); 11 12 grunt.loadNpmTasks('grunt-contrib-jshint'); 13 grunt.loadNpmTasks('grunt-contrib-watch'); 14 grunt.registerTask('default',['watch','jshint']); 15 };
终端中运行：grunt
如上图，执行watch任务，等待test.js文件发生改变
test.js文件被修改并保存后，执行jshint任务，检查test.js的语法。（在最下面增加了一个表达式："123;"）
修改后的test.js文件：
1 module.exports = function(grunt){ 2 grunt.initConfig({ 3 cssmin: { 4 hehe: { 5 options: { 6 banner: '/* My minified css file */', 7 report: 'gzip' 8 }, 9 files: { 10 'module_box.min.css': ['module_box.css'] 11 } 12 } 13 } 14 }); 15 16 grunt.loadNpmTasks('grunt-contrib-cssmin'); 17 grunt.registerTask('default',['cssmin']); 18 }; 19 123;
Using the watch event 使用watch事件
Gruntfile.js文件：
1 module.exports = function(grunt){ 2 grunt.initConfig({ 3 watch: { 4 files: ['test.js'], 5 }, 6 jshint: { 7 files: ['test.js'] 8 } 9 }); 10 11 grunt.loadNpmTasks('grunt-contrib-jshint'); 12 grunt.loadNpmTasks('grunt-contrib-watch'); 13 14 grunt.event.on('watch',function(action,filepath,target){ 15 grunt.log.writeln(""); 16 grunt.log.writeln(target + ':' + filepath + ' has ' + action); 17 }); 18 grunt.registerTask('default',['watch']); 19 };
grunt
修改test.js
watch事件触发后，输出的信息“default:test.js has changed”
如果需要动态修改你的配置，则nospawn选项需要开启，以保证watch运行在相同的上下文。
Live Reloading
将你所有的监控的目标加入实时重载最简单的方法就是设置livereload为true在任务级别。这样会运行一个实时重载服务器并且触发实时重载为所有的目标：
grunt.initConfig({
watch: {
options: {
livereload: true,
},
css: {
files: ['public/scss/*.scss'],
tasks: ['compass'],
},
},
});
你也可以为单独的watch目标配置实时重载或者运行多个实时重载服务器。记住，开始多个服务器时要指定不同的端口号：
1 grunt.initConfig({ 2 watch: { 3 css: { 4 files: ['public/scss/*.scss'], 5 tasks: ['compass'], 6 options: { 7 // Start a live reload server on the default port 35729 8 livereload: true, 9 }, 10 }, 11 another: { 12 files: ['lib/*.js'], 13 tasks: ['anothertask'], 14 options: { 15 // Start another live reload server on port 1337 16 livereload: 1337, 17 }, 18 }, 19 dont: { 20 files: ['other/stuff/*'], 21 tasks: ['dostuff'], 22 }, 23 }, 24 });
Enabling Live Reload in Your HTML 在你的HTML页面中开启实时重载
一旦你开启了一个实时重载服务器你就可以获取实时重载的脚本了。为了能在你的页面中使用实时加载，添加一个script标签在</body>标签之前：
<script src="http://localhost:35729/livereload.js"></script>