Love My Love

跟着宁皓网学 Browser-sync

2015.09.01

这东西很不错,可以让浏览器和我们的文件同步显示,意思是,你一修改完 css 或者 js 或者 Html,立即就能看到浏览器里他们的变化。 You’re worth it!

官方网站:http://www.browsersync.io

安装

npm install -g browser-sync

国内玩家,如果速度太慢,可以先安装 cnpm, 然后:

cnpm install -g browser-sync

当然,过程中还会用到 github 所以最好还是有 VPN 或 shadowsocks 配合 proxychains-ng

安装成功后,运行browser-sync命令可以出现帮助和说明,说明安装成功了,想要在那个项目里使用就先到那个目录下,然后运行:

npm init

npm install browser-sync --save-dev

--save-dev 参数用来将 browser-sync 作为开发依赖放到package.json 里去。

使用

这里以宁皓网的 github 上的 forest 为用例代码:

git clone https://github.com/ninghao/forest

启动服务

# --server 表示要启动一个服务器,后面跟的是要启动的服务所在根目录,不指定会是命令当先位置
# --files 指定要监视的文件,比如监视了 index.html 和 css 文件夹里的 css 文件
browser-sync start --server forest --files "forest/index.html, forest/css/*.css"

成功后,会自动打开浏览器,管理 browser-sync 在 http://localhost:3001

其他参数

--tunnel:与所有人同步 就是说,你的修改可以公布给网上的人,有地址,让他们都可以看到,地址是随机生成的。

--proxy:代理 这个功能很有用,我们一般开发的 php 动态的网站有依赖的一些环境,有了这个代理就方便了,比如,我们的测试地址是:http://test.dev那么我们就这么写这个参数:

--proxy test.dev

然后访问http://localhost:3000即可

把 browser-sync 作为 Gulp 的任务

安装 gulp :npm install gulp --save-dev

forest目录的上级目录下添加一个 gulp 文件gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function () {
  browserSync.init({
    server:{
      baseDir: './forest'
    },
    files: ['forest/index.html', 'forest/css/*.css']
  });
});

安装 gulp 的命令行工具:npm install -g gulp

执行任务:gulp browser-sync

如果报错说Cannot find module 'browser-sync',对应的代码行是var browserSync = require('browser-sync').create(); 请再次运行并保证成功:npm install gulp --save-dev然后再执行刚才的任务

发表评论