browser-sync

浏览器同步测试工具。能够实时监听 html,css 等文件的变化,实现 html 自动重载,css 自动插入(不刷新页面)。更重要的是Browsersync可以同时在PC、平板、手机等设备下进项调试

usage: 

1. 

$ cnpm i -D browser-sync

gulpfile.js:

var browserSync = require('browser-sync');

gulp.task('browser-sync', ['build', 'sass'], function(){

        browserSync({  server: { baseDir: '..' } })

});  // 表示在执行 browser-sync 任务之前先执行 build sass 任务,回调函数表示在本地端开启了一个 server 服务,用来监听文件变化

构建起 browserSync 服务器之后,还没完,还需要修改 sass ,watch 任务

gulp.task('sass', function(){

        gulp.src('styles/main.scss')

               .pipe(sass()).on('error', handleError)

               .pipe(prefix())

               .pipe(gulp.dest('../styles'))

               .pipe(browserSync.reload({stream: true}));  // 调用 reload 

});

gulp.task('rebuild', ['build'], function(){

       browserSync.reload();

})

gulp.task('watch', function(){

        gulp.watch(['**/*.html'], ['rebuild']);

        gulp.watch(['styles/*.scss'], ['sass']);

})

gulp.task('default', [ 'browser-sync', 'watch']);

2. 同步页面到移动端

-首先,打开terminal,ifconfig 获取机器的局域网IP地址(如:192.168.2.200)

-然后,打开手机的browser 连接 192.168.2.200:3000 就可以了,是不是很酷啊~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 1,037评论 0 1
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,682评论 1 17
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 2,070评论 4 50
  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    ZZES_ZCDC阅读 1,760评论 6 18
  • 如果你想活在你希望的世界,那么你就要按照希望的世界的规则去行动,自然而然你就会向那个世界靠拢,最终真正的活在你希望...
    袁公子爱生活阅读 557评论 0 0

友情链接更多精彩内容