gulp基础学习之三
2017-03-31 本文已影响0人
吾誰归
监控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！
