用户登录

使用 gulp 的 watch 这个方法,我们可以去监视一些文件,当这些文件发生变化的时候,立即去执行一些指定的任务。先打开 gulpfile.js ... 再去创建一个任务 ... gulp.task ... 这个任务可以叫做 watch ... 再用一个匿名函数 ... 在它里面,再用 gulp 的 watch 方法去做点事情。

输入 gulp.watch() ... 先指定一下要监视的文件 ... 比如去监视 index.html 这个文件 ... 逗号分隔一下 ... 再把要执行的任务列表放到这里 ... 这个任务列表要放到一个数组里,所以先输入一组方括号 .. 要执行的任务是 copy-index ...

它的意思就是,我们在执行 watch 任务的时候,去监视 index.html 这个文件的变化,当这个文件发生变化以后,就去自动执行 copy-index 这个任务。

下面,我们再用类似的方法,去添加两个 watch ...

保存 ... 回到命令行工具 ... 先去执行一下刚才创建的 watch 这个任务 ... gulp watch ... 这样 gulp 就会去监视文件的变化了 ... 你会看到这个任务并没有立即结束 ... 它会一直运行 ... 直到我们手工退出这个任务 ... 退出可以按一上 ctrl + C ...

再回到项目 .. 打开 index.html 这个文件 ... 随便修改一个地方 ... 然后保存一下 ... 回到命令行 ... 你会看到 gulp 执行了 copy-index 这个任务,因为 index.html 这个文件发生了变化 ...

每次保存被监视的文件,都会去执行指定的任务列表。回到项目,打开 dist 下面的 index.html .. 你会看到修改之后的 index.html 已经被复制到了这个目录的下面 ...

文件有变化时自动执行任务《 Gulp 自动化任务 》

统计

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

社会化网络

关于

微信订阅号

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