用browser-sync进行实时刷新

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

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

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

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

  1. "devDependencies": {
  2.     "browser-sync": "^2.10.1",
  3.     "gulp": "^3.9.0",
  4.     "gulp-sass": "^2.1.1"
  5.   }

2.新建gulpfile.js文件

  1. var gulp = require('gulp');
  2. var browserSync = require('browser-sync').create();
  3. var sass = require('gulp-sass');
  5. // Static Server + watching scss/html files
  6. gulp.task('serve', ['sass'], function() { 
  8.     browserSync.init({
  9.         server: "./src"
  10.     });
  12.     gulp.watch("src/scss/*.scss", ['sass']);
  13.     // gulp.watch("src/*.html" ,browserSync.reload);
  14.     gulp.watch("src/*.html").on('change', browserSync.reload);
  15. });
  17. // Compile sass into CSS & auto-inject into browsers
  18. gulp.task('sass', function() { 
  19.     return gulp.src("src/scss/*.scss")
  20.         .pipe(sass())
  21.         .pipe(gulp.dest("src/css"))
  22.         .pipe(browserSync.stream());
  23. });
  25. gulp.task('default', ['serve']);

3.命令行运行gulp

  1. gulp

4.浏览器打开页面

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

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

5.参考地址

browsersync doc

发表评论

表情：
评论列表 （有 0 条评论，279人围观）

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

相关阅读

    相关 vue实现数据实时刷新

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

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 214 阅读

    相关 前端窗体实时刷新

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

    叁歲伎倆叁歲伎倆/ 0 赞/ 384 阅读