用browser-sync进行实时刷新

分手后的思念是犯贱 2022-08-18 13:27 280阅读 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');
  4. // Static Server + watching scss/html files
  5. gulp.task('serve', ['sass'], function() {
  6. browserSync.init({
  7. server: "./src"
  8. });
  9. gulp.watch("src/scss/*.scss", ['sass']);
  10. // gulp.watch("src/*.html" ,browserSync.reload);
  11. gulp.watch("src/*.html").on('change', browserSync.reload);
  12. });
  13. // Compile sass into CSS & auto-inject into browsers
  14. gulp.task('sass', function() {
  15. return gulp.src("src/scss/*.scss")
  16. .pipe(sass())
  17. .pipe(gulp.dest("src/css"))
  18. .pipe(browserSync.stream());
  19. });
  20. 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 条评论,280人围观)

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

相关阅读

    相关 vue实现数据实时刷新

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

    相关 前端窗体实时刷新

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