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.

Grunt之watch详解的更多相关文章

  1. 前端开发 Grunt 之 Connect详解

    在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的 ...

  2. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  3. 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  4. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  5. 源映射(Source Map)详解

    一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场 ...

  6. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  7. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  8. JavaScript 各种遍历方式详解及总结

    JavaScript 各种遍历方式详解 在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环.为了搞清楚js ...

  9. Linq之旅:Linq入门详解(Linq to Objects)

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

随机推荐

  1. 关于MySQL中时间格式和取零点的问题

    select * from order where create_time>'2016-05-21 00:00:00'; 不包含2016-05-21 00:00:00时的订单 select * ...

  2. dubbo Forbid blacklist

    http://www.jameswxx.com/dubbo/%E8%A7%A3%E5%86%B3dubbo%E9%97%AE%E9%A2%98%EF%BC%9Aforbid-consumer/

  3. hibernate里的generator中class =value介绍

    在*.hbm.xml必须声明的<generator>子元素是一个Java类的名字,用来为该持久化类的实例生成唯一的标识.<generator class="sequence ...

  4. 集合-字典(Lookup/SortedDictionary)

    Lookup<TKey, TElement>非常类似于Dictionary<TKey, TValue>,但是把键映射在一个值集上. 必须调用ToLookup方法创建Lookup ...

  5. webapp之路--之必备知识

    移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决 ...

  6. hdu 5754 Life Winner Bo 博弈论

    对于king:我是套了一个表. 如果起点是P的话,则是后手赢,否则前手赢. 车:也是画图推出来的. 马:也是推出来的,情况如图咯. 对于后:比赛时竟然推错了.QAQ最后看了题解:是个威佐夫博奕.(2, ...

  7. javascript 基础 onclick(this)用法介绍

    http://www.5idev.com/p-javascript_events_onclick.shtml --------------------------------------------- ...

  8. Fragmen和Activity之间的通信--接口和实现的分离(转)

    Fragmen和Activity之间的通信--接口和实现的分离(转) 分类: Android平台     在平板的开发过程中通常都会采用多个Fragment的实现方式,通常有一个为list的Fragm ...

  9. Swift中自定义打印方法

    // 1.获取打印所在的文件 let file = ( #file as NSString).lastPathComponent // 2.获取打印所在的方法 let funcName = #func ...

  10. iOS中利用UISearchBar实现搜索

    先把源码贴出来 https://github.com/losedMemory/ZSSearchBar   这是我在github上写的一个Demo,大家可以看看 在大多数app中都会用到搜索功能,那么搜 ...