Browsersync

随着前端技术的飞速发展,前端的工程化构建工具也随着这股浪潮不断更迭,从grunt到gulp,而ant已经淹没在了潮流之中。然而,不单单是构建工具变化飞快,连构建工具的插件变化也是日新月异,最近项目使用gulp构建的过程中就尝试使用了Browsersync这个插件来替代gulp-livereload。

Why Browsersync?
首先,既然它能替代gulp-livereload,那么它就能实现gulp-livereload的主要功能:实时刷新——当你在IDE编辑文件保存时,插件会自动应用你的修改并自动刷新浏览器页面,其中文件不单包括html, js, css,还包括sass, less等类型的文件。
其次,如果Browsersync只是单单实现gulp-livereload的功能,那它不值一书。它当然还有其他优势,Browsersync可以同时在PC、平板、手机等设备下进项调试,这就意味着任何一次改动都会实时地应用到这些设备中,这将大大提升多设备开发的效率。

官网示例1

还不仅如此,它还能在不同的浏览器不同的设备上同步所有页面上的操作,这绝对是多浏览器兼容性测试的福音啊!

官网示例2

Amazing?
How to use Browsersync?
想要实现这些神奇的效果配置起来相当便捷。

  1. 安装Node.js(https://nodejs.org/en/)
  2. 项目中添加Browsersync依赖(package.json推荐)或安装Browsersync
  3. 在gulpfile.js中配置
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// 静态服务器
gulp.task('browser-sync',function(){
    browserSync.init({
      server: {
        baseDir:"./"
      }
    });
});
// 代理
gulp.task('browser-sync', function() {
    browserSync.init({
     proxy: "你的域名或IP"
   });
});
// 静态服务器(server)和代理(proxy)模式不能同时使用

这样就简单地启动了服务器,而要实现同步刷新就要通过gulp watch来调用Browsersync的reload方法。

// 打包js
gulp.task('js', function () {
    return gulp.src('app/js/*.js')
      .pipe(browserify())
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
});
// 确保js文件打包完成后,再调用reload方法
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('browser-sync',function(){
    browserSync.init({
      server: {
        baseDir:"./"
      }
    });
    // 当js目录下js文件发生变化时调用browserSync.reload
    gulp.watch("app/js/*.js", ['js-watch']);
});

应用js file需要重新刷新页面,而应用CSS样式并不用重新加载页面。从示例图1就可以看到,当我们修改CSS file的时候页面及时响应了这些修改而并没有刷新页面,因为Browsersync可以通过配置将修改后的CSS文件直接注入到浏览器中。

var sass = require('gulp-sass');
// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest("app/css"))
      .pipe(browserSync.stream()); // stream method returns a transform stream
});
// 修改上面的browser-sync task
gulp.task('browser-sync',function(){
    browserSync.init({
      server: {
        baseDir:"./"
      }
    });
    // 当js目录下js文件发生变化时调用browserSync.reload
    gulp.watch("app/js/*.js", ['js-watch']);
    // 当scss目录下scss文件发生变化时调用sass task
    gulp.watch("app/scss/*.scss", ['sass']);
});

项目中,开发时常前端和后端分离,而当各自接口开发完成后,进行联调测试时,前端会因为跨域问题无法请求到后台的数据,跨域当然可以通过现有的一些解决方案,如CORS等,但用Browsersync可以通过设置proxy的方式,简单的解决跨域问题而不需要修改业务代码。

// 修改上面的browser-sync task
gulp.task('browser-sync', function () {
    browserSync.init({
      proxy: "http://172.18.2.30", //后端服务器地址
      serveStatic: ['./'] // 本地文件目录,proxy同server不能同时配置,需改用serveStatic代替
    }); 
    // 当js目录下js文件发生变化时调用browserSync.reload
    gulp.watch("app/js/*.js", ['js-watch']);
    // 当scss目录下scss文件发生变化时调用sass task
    gulp.watch("app/scss/*.scss", ['sass']);
});

推荐阅读更多精彩内容

  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 362评论 0 1
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 1,174评论 4 17
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 1,609评论 1 17
  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    治电小白菜阅读 825评论 7 18
  • 大前端时代的到来,让我们对未来充满了各种幻想和憧憬,同时也带给我们了痛苦与迷茫。各种框架漫天飞,各种打包工具到处跑...
    左木子阅读 140评论 0 3