在Gulp中使用BrowserSync
博客已迁移至http://zlwis.me。
很早就听说过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确实是一个好东西!
在Gulp中使用BrowserSync的更多相关文章
- gulp 中的增量编译
最近花一点时间学了下 gulp,顺便学了下 sass,因为工作中并不需要用(我比较希望学习是需求驱动),所以一直拖到现在才学.突然觉得学习这类工具性价比很高,半天一天即可上手,技能树丰富了(尽管可能只 ...
- 如何在Gulp中提高Browserify的打包速度
使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch ...
- gulp中pipe的作用和来源
gulp的pipe方法是来自nodejs stream API的,并不是gulp本身源码所定义的. 一.pipe方法的作用 pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gu ...
- 【前端】在Gulp中使用Babel
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...
- gulp中常用的模块
gulp-cssmin: css压缩 gulp-uglify: js压缩混淆 gulp-imagemin: 图片压缩 gulp-htmlmin: html压缩 gulp-concat: 文件合并 g ...
- 浏览器同步测试神器 — BrowserSync
Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当 ...
- BrowserSync使用
在Gulp中使用BrowserSync 2016-02-24 23:47 by 那时候的我, 116 阅读, 0 评论, 收藏, 编辑 博客已迁移至http://lwzhang.github.io. ...
- 第210天:node、nvm、npm和gulp的安装和使用详解
一.node 1.什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行J ...
- gulpjs
http://www.cnblogs.com/2050/p/4198792.html 这篇文章很全面的讲解了gulpjs的使用 https://www.jianshu.com/p/9723ca2a ...
随机推荐
- find 的一些用法
find的一些用法 例1:find . -type f -exec chmod -R 644 {} \ ; #{}代表签名的输出,\;代表结束命令操作结束 例2: find -print0 |xa ...
- 2.编写实现:有一个三角形类Triangle,成员变量有底边x和另一条边y,和两边的夹角a(0<a<180),a为静态成员,成员方法有两个:求面积s(无参数)和修改角度(参数为角度)。 编写实现: 构造函数为 Triangle(int xx,int yy,int aa) 参数分别为x,y,a赋值 在main方法中构造两个对象,求出其面积,然后使用修改角度的方法,修改两边的夹角,再求出面积值。(提示
求高的方法 h=y*Math.sin(a) 按题目要求,需要我们做的分别是:1.改角度2.显示角度3.求面积并显示 代码用到:1.静态成员变量以修改角度2.数学函数 以下具体代码具体分析 import ...
- python 定时器schedule执行任务
import schedule import time """英文版书籍:<essential sqlalchemy>,这本书讲了很多在每天某个指定的时间点上 ...
- c++赋值运算符为什么要返回引用?
为什么赋值运算符要返回引用?? 因为赋值操作会改变左值,而 + 之类的运算符不会改变操作数,所以说赋值运算符重载要返回引用以用于类似 (a=b)=c 这样的再次对a=b进行写操作的表达式.+ 返回一个 ...
- where语句中不能直接使用聚合函数
1.问题描述 select deptno ,avg(sal) from emp where count(*)>3 group by deptno; 在where 句中使用聚合函数count(*) ...
- CBrother异或加密与C++异或加密函数
CBrother脚本异或加密与C++异或加密函数 异或对于数据加密来说是最简单的方式,在一般的安全性要求不是非常高的地方,异或加密是最好的选择. C++异或加密代码 int g_PWD = 0xffe ...
- 字符串Hash/树Hash学习笔记
哈希 Tags:字符串 作业部落 评论地址 一.概述 百度百科: 散列表(Hash table/哈希表),是根据关键码值(Key value)而直接进行访问的数据结构. 哈希表常用于比较两个字符串是否 ...
- 关于DP和背包
听说过动态规划(DP)的同学应该都知道有背包问题的存在. 首先我们来了解一下动态规划 基本思想: 动态规划算法通常用于求解具有某种最优性质的问题. 在这类问题中, 可能会有很多可行解.每一个解都对应于 ...
- 2460: [BeiJing2011]元素
2460: [BeiJing2011]元素 链接 分析: 贪心的想:首先按权值排序,然后从大到小依次放,能放则放.然后用线性基维护是否合法. 代码: #include<cstdio> #i ...
- P4249 [WC2007]剪刀石头布
有一个竞赛图,要给一些边定向,求三元环最多的数量 反过来考虑最少的不是环的三个点(称为不好的环),一定有一个点有2条入边,一个点有2条出边,一个点1入边1出边 可以对每一个不好的环只记录入边为2的点, ...