2021.10.10

Node.js

gulpでbrowser-syncを実行

gulpにbrowser-syncを組み込んで、gulp起動時にブラウザが立ち上がるようにします。以下のコマンドでbrowser-syncをインストールします。

npm install browser-sync

gulpfile.jsの記述です。gulp起動時に実行されるdefaultのタスクからbrowsersync関数を呼び出し、browserSync.initを実行します。browserSync.initはgulp起動時のみ実行します。

//gulpfile.js
const gulp = require('gulp');
const browserSync = require('browser-sync').create();

function browsersync(done) {
  browserSync.init({
    proxy: 'http://localhost/htdocs/',
    port: 3000,
    reloadOnRestart: true,
  });
  done();
}

//gulp起動時、browserSync.initを実行
gulp.task('default', gulp.series(browsersync));

browserSync.initで設定したproxyのアドレスは、XAMPPのバーチャルホストで設定したドキュメントルートの直下に作成したディレクトリを指定します。

XAMPPのバーチャルホストは以下のファイルで設定します。
C:\xampp\apache\conf\extra\httpd-vhosts.conf

gulpを起動してbrowser-syncが正常に動作すると、指定したアドレスでブラウザが立ち上がりサイトが表示されます。コンソールにはアクセスしたURLが表示されます。Externalのアドレスは同じネットワーク内であれば他の端末からアクセス可能です。UIのアドレスはbrowser-syncの管理画面です。

ただしこのままではbrowser-syncが動作するのはgulp起動時の一度だけです。サイト内のhtmlファイル更新時とscssファイルを更新してsassがコンパイルされた後にbrowser-syncが実行されるようにgulpfile.jsを変更します。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(
      gulp
        .dest('../assets/css')
    )
    .pipe(
      //sassコンパイル時はリロードせずブラウザに反映
      browserSync.reload(
        {stream:true}
      )
    );
}

function browsersync(done) {
  browserSync.init({
    proxy: 'http://localhost/htdocs/',
    port: 3000,
    reloadOnRestart: true,
  });
  done();
}

function watchFiles(done) {

  const browserReload = () => {
    browserSync.reload();
    done();
  };

  //scssファイル更新時にsassのコンパイルを実行
  gulp.watch('./src/scss/**/*.scss').on('change', styles);
  //htmlファイル更新時にbrowserSync.reloadを実行
  gulp.watch('../**/*.html').on('change', browserReload);
}

//gulp起動時、sassのコンパイル・browserSync.init・ファイル監視を順番に実行
gulp.task('default', gulp.series(styles, browsersync, watchFiles));

ファイル監視中にhtmlファイルが更新された時はbrowserSync.reloadを実行します。sassコンパイル時はリロードせずブラウザに反映させるため、browserSync.reloadをstream:trueで実行します。

関連記事

2022.07.10

Node.js

scss-lintのエラー回避方法

scssファイル内でscss-lintのエラーを回避します。以下はgridレイアウトで使用する「fr」が許可されていない単位としてエラーになるのを無効化していま…

2021.03.10

Node.js

npm run-scriptでgulpを実行

ローカルにインストールしたnpmパッケージの実行は、npxコマンドを利用するのが簡単です。以下のgulpfile.jsでテストします。各タスクのfunction…

2021.02.12

Node.js

scss-lint.ymlの設定

Ruby製のscss-lintはscssのコードを検査して設定と異なる場合は警告してくれるツールです。ルールを記述する設定ファイルは拡張子ymlのファイルで作成…

2021.03.07

Node.js

.eslintrcの設定

ESLintはJavaScriptの構文をチェックするツール(Linter)の一つで、.eslintrcはESLintの設定ファイルです。以下を記述することでE…

2021.01.10

Node.js

npxでgulpを実行

npmはNode.jsインストール時に付属するパッケージ管理マネージャで、Node.jsのパッケージの管理や実行を取り扱うものです。Node.jsをインストール…

上に戻る