用browser-sync进行实时刷新

分手后的思念是犯贱 2022-08-18 13:27 147阅读 0赞

# 1.添加gulp、gulp-sass、browser-sync组件 #

npm install --save-dev gulp gulp-sass browser-sync

会在package.json中添加如下内容:

"devDependencies": {
        "browser-sync": "^2.10.1",
        "gulp": "^3.9.0",
        "gulp-sass": "^2.1.1"
      }

# 2.新建gulpfile.js文件 #

var gulp = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass = require('gulp-sass');
    
    // Static Server + watching scss/html files
    gulp.task('serve', ['sass'], function() { 
    
        browserSync.init({
            server: "./src"
        });
    
        gulp.watch("src/scss/*.scss", ['sass']);
        // gulp.watch("src/*.html" ,browserSync.reload);
        gulp.watch("src/*.html").on('change', browserSync.reload);
    });
    
    // Compile sass into CSS & auto-inject into browsers
    gulp.task('sass', function() { 
        return gulp.src("src/scss/*.scss")
            .pipe(sass())
            .pipe(gulp.dest("src/css"))
            .pipe(browserSync.stream());
    });
    
    gulp.task('default', ['serve']);

# 3.命令行运行gulp #

gulp

# 4.浏览器打开页面 #

[http://localhost:3000/][http_localhost_3000]  
它会自动增加如下代码到html

<script async="" src="/browser-sync/browser-sync-client.2.10.1.js"></script>

# 5.参考地址 #

[browsersync doc][]

[http_localhost_3000]: http://localhost:3000/
[browsersync doc]: https://www.browsersync.io/docs/gulp/

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 thymeleaf 实时刷新显示

`1. settings中间勾选下面两项` ![7c6e386c9d91444488e8d75537afc391.png][] `2. 使用`Alt+ Ctrl + Shi

待我称王封你为后i/ 2024年03月30日 09:21/ 0 赞/ 46 阅读

相关 vue实现数据实时刷新

vue.js是一个轻量级的前端框架，你可以使用它来实现数据实时刷新。你可以使用vue的数据绑定特性来实现数据实时刷新。例如，假设你有一个数据对象`data`，它有一个属

Myth丶恋晨/ 2024年03月27日 12:10/ 0 赞/ 34 阅读

相关页面实时刷新技术探讨

页面实时刷新技术探讨 url:[http://blog.csdn.net/skysandy/archive/2009/08/17/4455480.aspx][http_b

缺乏、安全感/ 2022年09月18日 13:48/ 0 赞/ 161 阅读

相关用browser-sync进行实时刷新

1.添加gulp、gulp-sass、browser-sync组件 npm install --save-dev gulp gulp-sass browser-s

分手后的思念是犯贱/ 2022年08月18日 13:27/ 0 赞/ 148 阅读

相关打造前端MAC工作站（十）效率工具 Browsersync ，文件保存浏览器自动刷新

打造前端MAC工作站（十）效率工具 Browsersync ，文件保存浏览器自动刷新前言当我们在开发`vue+webpack`的项目时候，发现有一点非常好，就是

布满荆棘的人生/ 2022年07月08日 16:55/ 0 赞/ 174 阅读

相关 web显示实时时间动态刷新

代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

约定不等于承诺〃/ 2022年06月09日 12:07/ 0 赞/ 308 阅读

相关实时数据刷新网页的

魏岩魏东生（weiyan\_72@sohu.com） -------------------- <table> <tbody> <t

浅浅的花香味﹌/ 2022年04月01日 09:12/ 0 赞/ 204 阅读

相关前端窗体实时刷新

前言本次实现的功能：刷卡。界面连上刷卡机，当没有卡时，提示“寻卡失败”，有卡时，直接获取卡的物理卡号，因为使用的是创建的生命周期函数，只能获取一次卡号，如果进行换卡

叁歲伎倆/ 2022年02月26日 13:12/ 0 赞/ 227 阅读

相关 vue-cli + webpack + Browsersync 进行移动端的同步调试

准备工作在使用脚手架安装 Vue 项目的时候，首先要安装好，node.js、npm 或 cnpm、webpack，可以使用以下命令进行查看并确认是否安装 //

客官°小女子只卖身不卖艺/ 2021年10月23日 09:21/ 0 赞/ 287 阅读

相关 browsersync的使用方法

![70][] ![70 1][] ![70 2][] ![70 3][] ![70 4][] ![70 5][]

た入场券/ 2021年09月15日 05:32/ 0 赞/ 539 阅读