在Gulp中使用BrowserSync_html/css_WEB-ITnose-html教程-PHP中文网

在Gulp中使用BrowserSync_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:25:51

原创

1411人浏览过

很早就听说过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确实是一个好东西！