gulp基础学习之三

监控sass文件

之二里面，想让计算机编译就需要运行下 gulp  sass 这个命令，这也太麻烦了吧！

还好gulp提供watch方法语法如下：

gulp.watch('监控变化文件的位置',[‘task’，‘to’，‘run’])；

改造下之前的代码，添加监控

在cmd 里面运行 gulp  watch

这样gulp会一直帮你监控sass文件的变化了

有了监听，每次修改sass文件，gulp就会自动执行任务了

想退出监控的话可以在cmd  按Ctrl+c就会提示是否退出监控，Y就可以退出

---

自动刷新浏览器

接下来还可以更近一步，让gulp去实时刷新浏览器

这就要引入新的插件

3步走：安装，引用，使用

npm命令走起：npm  install  browser-sync  --save-dev

这样就安装了browserSync  同时在package.json里面添加了依赖

接下来就要引用beowserSync：var browserSync = require('browser-sync');

创建了一个browserSync任务，告诉它根目录在哪里

这个任务要放在sass  和watch的下面

接下来告诉gulp在watch之前先要把browserSync和sass任务执行一下

再把之前的代码修改下，让每次修理css文件就刷新下浏览器

执行gulp  watch：

这样每次修改了css样式浏览器就会自动刷新；

但是会改动不止会有css，还有html和js ！再改下

OK！

---