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/