Grunt之watch详解

Grunt 之 watch 和 livereload

如今 watch 中已经集成了 livereload ，因此把它们放在一块儿说明。

watch 能够监控特定的文件，在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务，好比 livereload 等等。

1. 安装

项目定义在 GitHub 上，地址：https://github.com/gruntjs/grunt-contrib-watch

能够经过 NPM 直接进行安装

npm install grunt-contrib-watch --save-dev

安装以后，须要在 Gruntfile.js 中添加任务的注册。

grunt.loadNpmTasks('grunt-contrib-watch');

经过 grunt watch 运行 watch 任务。 

2. 配置 watch

与 connect 相似，在 watch 下面定义本身的子任务，下面的示例将会监控 src 目录下的任意 *.html 文件，在文件被修改以后，输出被修改的文件名。

这里经过 watch 的事件进行处理。

'use strict';  

module.exports = function (grunt) { // Project configuration.  grunt.initConfig({ watch:{ start:{ files: ['src/*.html'] } } }); grunt.event.on('watch', function(action, filepath, target) { grunt.log.writeln(target + ': ' + filepath + ' has ' + action); }); grunt.loadNpmTasks('grunt-contrib-watch'); }

咱们启动 watch 任务，注意这个任务会持续监控。

PS C:\study\grunt> grunt watch
Running "watch" task Waiting... start: src\index.html has changed >> File "src\index.html" changed. Completed in 0.001s at Sun Sep 06 2015 14:52:52 GMT+0800 (China Standard Time) - Waiting...

这里咱们使用了 files 参数，这个参数能够为一个路径字符串或者一个字符串的数组，做为监控的目标。路径的写法能够参考：Grunt 之通配符

多数状况下，咱们但愿在文件发生变化以后，直接执行特定的任务，好比在修改了 *.js 的脚本文件以后，自动进行文件检查。这能够经过 tasks 来直接声明。

这里的 jshint 是咱们后面会讲到的一个 javascript 语法检查库，如今还不能用呀。

watch: {
  scripts: {
    files: ['**/*.js'], tasks: ['jshint'] }, },

这里咱们自定义一个名为 hello 的任务。

tasks 是一个任务名称的字符串或者，一个任务名称的字符串数组，做为咱们执行的任务。

'use strict';  

module.exports = function (grunt) { // Project configuration.  grunt.initConfig({ watch:{ start:{ files: ['src/*.html'], tasks: ['hello'] } } }); grunt.registerTask('hello', 'Hello, world task description.', function() { grunt.log.writeln('Hello, world.'); }); grunt.loadNpmTasks('grunt-contrib-watch'); }

 

3. 高级选项 

能够经过 options 配置更加详细的设置。

1. options.spawn

boolean 类型，默认 true。默认会建立一个新的子进程来执行触发的任务。经过设置为 false，可使得触发的任务能够共享进程上下文，而且提升速度。可是，这会致使监控任务容易崩溃，因此，请尽可能使用这个特性，在新的子进程中执行任务。

watch: {
  scripts: {
    files: ['**/*.js'], tasks: ['jshint'], options: { spawn: false, }, }, },

2. options.interrupt

boolean 类型，默认为 false。仍是和进程相关。

在文件发生修改的时候，会生成子进程来执行任务，默认的行为是对于每一个目标来讲，在上一个处理完成以后，仅仅生成一个新的子进程来执行任务。设置 interrupt 为 true，将会致使停止上一个进程，生成一个新进程来处理最后的变动。

watch: {
  scripts: {
    files: '**/*.js', tasks: ['jshint'], options: { interrupt: true, }, }, },

 

3. options.debounceDelay

这是整数类型的参数，若是一样的文件或者路径被修改，须要等待多长时间才触发事件。默认 500 毫秒。

watch: {
  scripts: {
    files: '**/*.js', tasks: ['jshint'], options: { debounceDelay: 250, }, }, },

 

4. options.event

字符串或者数组，默认为 'all'

指定监控目标的特定事件类型，能够为 'all', 'changed', 'added' 和 'deleted'.

watch: {
  scripts: {
    files: '**/*.js', tasks: ['generateFileManifest'], options: { event: ['added', 'deleted'], }, }, },

 

5. options.reload

boolean 类型参数，默认为 false。

默认状况下，若是 Gruntfile.js 文件被监控，在这个文件被修改以后，会致使监控任务从新启动。而且从新加载 Gruntfile.js。

若是 reload 设置为 true，任何被监控文件的修改都会致使监控任务从新启动。除非你的 Gruntfile.js 依赖于其它文件，不然不使用这个参数。

watch: {
  configFiles: {
    files: [ 'Gruntfile.js', 'config/*.js' ], options: { reload: true } } }

6. options.forever

boolean 类型参数，默认为 true。

这个整个任务级别的参数，不能在单个目标上配置。默认状况下，监控任务会处理 grunt.fatal 和 grunt.warn ，防止致使的退出监控问题。若是你不但愿监控任务覆盖 grunt.fatal 和 grunt.warn ，能够将 forever 设置为 false。

options.atBegin

boolean 类型，默认为 false。

在监控任务启动的时候，自动触发对应的任务。

 

7. options.cwd

字符串或者对象类型，默认为 process.cwd()

设置当前的工做目录，默认为 process.cwd()，能够设置为字符串的目录来定义监控和产生的子任务的目录，或者一个对象来描述各自独立的路径。

 options: { 
    cwd: { 
        files: 'match/files/from/here', spawn: 'but/spawn/files/from/here' } }

 

4. livereload

这就是配合 connect 的 livereload 了。咱们单独拿出来讲明。

它是 options 的一个属性，类型为 boolean, 数值，或者配置对象。默认为 false

设置为 true 等价设置为 35729.

实际上，会启用一个支持从新加载的服务器，这个服务器工做在上述端口号上，经过这个服务器能够获取一个脚本，当文件被修改以后，经过这个脚本通知前端浏览器自动从新加载内容。

例如：

watch: {
  css: {
    files: '**/*.sass', tasks: ['sass'], options: { livereload: true, }, }, },

启动以后，实际上在指定的端口上建立了一个服务器，若是访问的话，能够看到返回的信息。

访问：http://localhost:35729/

返回的内容

{"tinylr":"Welcome","version":"0.0.5"}

须要的话，还能够工做在 https 上，那就须要经过 key 和 cert 进行配置了。

watch: {
  css: {
    files: '**/*.sass', tasks: ['sass'], options: { livereload: { port: 9000, key: grunt.file.read('path/to/ssl.key'), cert: grunt.file.read('path/to/ssl.crt') // you can pass in any other options you'd like to the https server, as listed here: http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener  } }, }, },

更多内容能够查看 enable livereload on your HTML.