2.BrowserSync

BrowserSync可以实时同步更新CSS、JS文件,此外最关键的是全平台支持,即你可以在手机QQ浏览器、微信
浏览器里面调试。

一、安装

结合Gulp来用的,在Gulp下更方便一点。官方也有BrowserSync for Gulp的插件

1、安装开发依赖

在终端里输入:
$ npm install browser-sync gulp --save-dev
如果安装报错请加sudo:
$ sudo npm install browser-sync gulp --save-dev

2、编辑gulpfile.js

gulpfile.js文件请新建。先来看一下项目的目录结构,bin文件夹是最终发布的目录,我们把它当作BrowserSync
代理服务器启动的根目录:

gulpfile.js文件代码:
var gulp = require('gulp');
var browserSync = require('browser-sync');
// Static server
gulp.task('browser-sync', function() {
    browserSync({
      server: {
        //指定服务器启动根目录
        baseDir: "./bin"
      }
    });
//监听任何文件变化,实时刷新页面
gulp.watch("./bin/**/*.*").on('change', browserSync.reload);
});

二、启动

打开终端输入:
$ gulp browser-sync
此时浏览器会自动打开http://localhost:3000的页面   

综上转于:http://www.codingserf.com/index.php/2015/03/browsersync/

results matching ""

    No results matching ""