BrowserSync使用
2024-09-20 21:11:49
在Gulp中使用BrowserSync
2016-02-24 23:47 by 那时候的我, 116 阅读, 0 评论, 收藏, 编辑
博客已迁移至http://lwzhang.github.io。
很早就听说过BrowserSync,也看过一些相关文章,可就是没用过。之前一直在用Gulp开发项目,每次编写完Sass后还要用按F5
刷新页面看效果,想想也是够傻的,这么好用的东西竟然现在才开始用。
BrowserSync可以同时同步刷新多个浏览器,更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
安装browser-sync
模块
npm install browser-sync -g
命令行直接使用
browser-sync start --server --files "css/*.css"
使用上面命令会开启一个迷你服务器,自动帮你打开浏览器,默认地址localhost:3000
,默认打开index.html
,如果没有,需要手动加上你要打开的页面,如localhost:3000/test.html
。
通常你不会需要默认的地址,所以需要使用代理模式:
browser-sync start --proxy "localhost:8080" --files "css/*.css"
Browsersync + Gulp
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return sass('sass/style.scss', {style: "expanded"})
//.pipe(sass({style: "expanded"}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(browserSync.stream());
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./"
});
gulp.watch("sass/*.scss", ['sass']);
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('default', ['serve']);
其中
gulp.watch("sass/*.scss", ['sass']);
会在编译完sass后,以无刷新方式更新页面。
gulp.watch("*.html").on('change', browserSync.reload);
会在修改html文件后刷新页面。
如果需要在修改js后刷新页面,可以像下面这样:
gulp.task('sass', function() {
return sass('sass/style.scss', {style: "expanded"})
//.pipe(sass({style: "expanded"}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'))
.pipe(notify({ message: 'Styles task complete' }))
.pipe(browserSync.stream());
});
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());;
});
gulp.task('serve', ['sass', 'js'], function() {
browserSync.init({
server: "./"
});
gulp.watch("sass/*.scss", ['sass']);
gulp.watch("*.html").on('change', browserSync.reload);
gulp.watch("js/*.js", ['js'])
});
gulp.task('default', ['serve']);
BrowserSync确实是一个好东西!
最新文章
- python中的 descriptor
- PureCode--iOS--自定义UITableViewCell(含疑问)
- 将类似 12.56MB 36.89KB 转成 以K为单位的数字【备忘】
- 我去,徒弟半夜来电让写一个PHP短信验证(和群发)
- 基于struts2、spring的应用闲置一段时间后报空指针错(转)
- 重新理解JS的6种继承方式
- _AR=";ar"; _ARFLAGS=";-ruv";
- IOS @2X.png
- myeclipse10安装egit和使用
- 并行计算之OpenMP入门简介
- 如何修改tomcat的端口
- HashMap为什么线程不安全(hash碰撞与扩容导致)
- bootstrap基础知识
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获(下)
- Android设计模式之代理模式
- Android的actionBar的菜单使用-android学习之旅(四十三)
- Adobe Premiere Pro CS6 下载安装包成功
- C# 读取TXT文本数据 添加到数据库
- MySQL的binlog恢复(Windows下)
- 在Azure DevOps Server的代理服务器安装Python环境