一、Browsersync
官网介绍:Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。http://www.browsersync.cn/
1、安装:
npm install --save-dev browser-sync
2、gulp引入及配置
gulp引入
const browserSync = require('browser-sync').create();
gulp启动时初始化
gulp.task('default', function () {
browserSync.init({
server: {
baseDir: "./dist"
},
notify: false
});
gulp.watch('src/**/*.*', ['index']);
});
gulp监视到文件变化处理完task后重载浏览器
gulp.task('index', ['clean'], function () {
gulp.start('styles', 'scripts', 'images', 'html');
browserSync.reload();
});