1. Home
  2. gulp
  3. 拥有实时重载（live-reloading）和 CSS 注入的服务器

拥有实时重载（live-reloading）和 CSS 注入的服务器

发布时间：2017-04-10 文章标签：gulp 本文阅读量：1354

拥有实时重载（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国际许可协议的相同方式 许可.
加载更多>> 文章推荐：

博文分类

关于作者:

    简介：

    系统架构师 、作家、
    研究方向:数据分析、 深度学习、 服务器架构、 系统原理

我要申请友链