文件发生变化执行指定的任务

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

watch 这个任务的相关配置可以放到在 initConfig 方法里面定义的对象里,输入 grunt.initConfig({}); 然后要添加一个跟任务同名的属性 ... watch 任务的属性就是 watch ... 它的值是一个对象 ... 在这个对象里,我们可以为 watch 任务定义多个目标 ... 比如定义一个叫 html 的目标,去监视所有的 html 文件的变化,定义一个 style 目标,去监视所有样式表文件的变化 ...

这里我先添加一个 html ... 它的值又是一个对象 ... 在这个对象里,可以设置一下 files 属性,这个属性的值就是你要监视的文件 ... 可以是一个文件,可以是多个文件,也可以是表示文件的模式 ... 比如 * 表示所有的东西,除了 / 以外 ... 用 ** 可以表示任何东西 ...

给这个 files 属性一下数组作为它的值 ... 然后把 index.html 这个文件作为这个数组的一个项目 ... 这个文件就是 html 这个目标要监视的文件 ... 后面用一个逗号 ...

另起一行 ... 再添加一个 tasks 属性 ... 这个属性的值,就是要执行的任务的列表 ... 也给它一个数组作为它的值 ... 数组里的每个项目就是要执行的任务 ... 添加一个 copy:html ... 下面,我们可以再去定义这个任务 ... 在前面的视频里已经介绍过了 grunt-contrib-copy 这个插件的用法 ...

先去加载这个插件 ..

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

再配置一下 copy 任务 ... 同样在 initConfig 这个方法里面,先添加一个叫 copy 的属性 ... 然后给这个任务添加一个目标 ... 名字是 html ... 它的值是一个对象 ... 在这个对象里 设置一下 src 属性的值 ... 就是要处理的文件 ... 这里就是 index.html ... 再设置一下 dest 属性,设置一下这个文件复制到的位置 ... 把它放到 dist 这个目录的下面 ...

现在,我们在执行 watch 任务的以后,如果 index.html 这个文件发生了变化 ... 就会去执行 copy任务的 html 这个目标 ... 保存 ... 回到命令行 ... 输入 grunt watch ...

这个任务一直会在待机的状态 ... 因为它要实时的监视文件的变化 ... 回到项目 ... 打开 index.html ... 保存一下 ... 这样会触发执行 watch 任务的 html 这个目标任务 ... 也就会把 index.html 这个文件,复制一份到 dist 这个目录的下面 ...

https://github.com/isaacs/minimatch#options

文件发生变化执行指定的任务《 Grunt 自动化任务 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点