拥有实时重载(live-reloading)和 CSS 注入的服务器
拥有实时重载(live-reloading)和 CSS 注入的服务器
使用 BrowserSync 和 gulp,你可以轻松地创建一个开发服务器,然后同一个 WiFi 中的任何设备都可以方便地访问到。BrowserSync 同时集成了 live-reload 所以不需要另外做配置了。
首先安装模块:
$ npm install --save-dev browser-sync
然后,考虑拥有如下的目录结构...
gulpfile.js
app/
styles/
main.css
scripts/
main.js
index.html
... 通过如下的 gulpfile.js
,你可以轻松地将 app
目录中的文件加到服务器中,并且所有的浏览器都会在文件发生改变之后自动刷新:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// 监视文件改动并重新载入
gulp.task('serve', function() {
browserSync({
server: {
baseDir: 'app'
}
});
gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload);
});
在 index.html
中引入 CSS:
<html>
<head>
...
<link rel="stylesheet" href="styles/main.css">
...
通过如下命令启动服务,并且打开一个浏览器,访问默认的 URL (http://localhost:3000):
gulp serve
+ CSS 预处理器
一个常见的使用案例是当 CSS 文件文件预处理之后重载它们。以 sass 为例,这便是你如何指示浏览器无需刷新整个页面而只是重载 CSS。
考虑有如下的文件目录结构...
gulpfile.js
app/
scss/
main.scss
scripts/
main.js
index.html
... 通过如下的 gulpfile.js
,你可以轻松地监视 scss
目录中的文件,并且所有的浏览器都会在文件发生改变之后自动刷新:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('sass', function() {
return sass('scss/styles.scss')
.pipe(gulp.dest('app/css'))
.pipe(reload({ stream:true }));
});
// 监视 Sass 文件的改动,如果发生变更,运行 'sass' 任务,并且重载文件
gulp.task('serve', ['sass'], function() {
browserSync({
server: {
baseDir: 'app'
}
});
gulp.watch('app/scss/*.scss', ['sass']);
});
在 index.html
文件中引入预处理后的 CSS 文件:
<html>
<head>
...
<link rel="stylesheet" href="css/main.css">
...
通过如下命令启动服务,并且打开一个浏览器,访问默认的 URL (http://localhost:3000):
gulp serve
附注:
- 实时重载(Live reload),CSS 注入以及同步滚动可以在 BrowserStack 虚拟机里无缝执行。
- 设置
tunnel: true
来使用一个公开的 URL 来访问你本地的站点 (支持所有 BrowserSync 功能)。
有疑问、勘误、请您在下方留言,感谢您的支持 ღ( ´・ᴗ・` )!
感谢您阅读,这篇文章归 极客点子版权所有.
如果转载,请注明出处: 极客点子版权所有(/page/687.html)
本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.
如果转载,请注明出处: 极客点子版权所有(/page/687.html)

本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.
- You Don't Know JS: Async & Performance Appendix B: Advanced Async Patterns
- 6.You Don't Know JS: ES6 & Beyond Chapter 5: Collections
- You Don't Know JS: ES6 & Beyond Chapter 6: API Additions
- 2.You Don't Know JS: ES6 & Beyond Chapter 1: ES? Now & Future
- You Don't Know JS: ES6 & Beyond Chapter 8: Beyond ES6
博文分类
- nodejs
- express
- thinkjs
- go
- beego
- javascript
- css3
- react native
- python3
- react
- 翻译
- 手册
- 树莓
- Error修复
- 五味
- IoT
- 技巧
- swift
- Android
- C++
- ruby
- perl
- linux
- mysql
- pgSQL
- Redis
- webpack
- C
- Object-C
- SOA
- browserify
- unix
- NDK
- C#
- Docker
- java
- PHP
- gulp
- Sass
- Data mining
- Architecture
- Laravel
- TCP/IP
- AI
- Unix Socket
- Lua
- League of Legends
- tensorflow
- minecraft
- flutter
- dart2
- mongodb
- Julia
- UML
- typescript
- rust
- nginx
- 极客时间
- 架构与道
- 算法
- RHCA