js STUDIO

ライブリロードとCSS注入

Browsersyncとgulpを使用して、 同じWiFiネットワーク上で複数の端末からアクセス出来る開発用のサーバーを、簡単に作成することが出来ます。 また、BrowserSyncはライブリロードを組み込みで持つため、そのための設定はありません。

まず、モジュールをインストールします。 

$ npm install --save-dev browser-sync

次に下記のファイル構成を想定します。 

gulpfile.js
app/
  styles/
    main.css
  scripts/
    main.js
  index.html

appディレクトリのファイルが簡単に提供可能で、 下記のgulpfile.jsに従って、変更があった際には全てのブラウザがリロードされます。 

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

scssディレクトリのSassファイルを監視して、 gulpfile.jsに従って変更があった際に、全てのブラウザのリロードを簡単に行うことが出来ます。 

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'タスクで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

追加情報

  • ライブリロードとCSS注入、スクロール/フォームの同期は、 BrowserStack仮想マシン内部でシームレスに動作します。
  • tunnel: trueを設定することで、公開URLでローカルサイトを閲覧することが出来ます。(BrowserSync機能が全て有効)

 Back to top

© 2010 - 2017 STUDIO KINGDOM