下層ページのみのプロジェクトでbrowser-syncのURLを合わせる方法[Gulp]

こんにちは！のせっち@nosecchi01です。

案件によっては、

という構成があるかと思います。

上記のケースで、ワードプレスと下層ページを別プロジェクトで構築したいとします。
その際はbrowser-syncのパスも下層ページ用に合わせたいですよね。

そうしないと、browser-syncのURLが合わないからです。

今回は、『下層ページのみのプロジェクトでもbrowser-syncのURLを合わせる方法』をご紹介します。

browser-syncの基本形

まずはbrowser-syncの基本形をおさらいしましょう。

Gulpを使います。Gulpの最低限の知識はある前提です。

Gulpの知識が全くない方は、こちらの記事をどうぞ！有料ですが、たくさんのポジティブなレビューももらっています。
返金も可能なので、興味のある方はどうぞ！

作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】｜のせっち｜note

※ 当noteは発売から一週間だけ480円で公開していました。現在は値上げしましたが、値上げ後に3万字以上のコンテンツ追加を行っています。 noteをチラ見してみて「思ってた…

note.com

npm i -D gulp browser-sync

const browserSync = require("browser-sync");

const buildServer = (done) => {
  browserSync.init({
    port: 8080,
    files: ["**/*"],
    server: { baseDir: "./" },
  });
  done();
};

exports.default = buildServer

今回解説する部分のみの最低限の記述です。

このままでもサーバーは起動してくれるのですが、下層ページの場合、

たとえば、https://www.hoge.com/lp

のように/lpから始まらないといけません。
（つまり、開発時はhttp://localhost:8080/lpで開けてほしい！）

localhost:8080で開いてもトップページはOKなのですが、一番困るのは、aタグのリンクが合わないことです…！

aタグ（たとえばlocalhost:8080/lp/about）をクリックすると、Cannot GET / となって真っ白なページが表示されてしまいますね…。

開発時はURL手打ちで確認していってもいいのですが、クリックの挙動も確認したいので、できれば本番環境と合わせたいです。

これで解決

gulpfile.jsに下記を追加すれば解決です。

const browserSync = require("browser-sync");

const buildServer = done => {
  browserSync.init({
    port: 8080,
    files: ["**/*"],
    server: {
      baseDir: "./",
      routes: { "/lp": "./" } // 追加
    },
    startPath: "/lp", // 追加
  });
  done();
};

これでOKです。

試しにローカルサーバーを立ててみます。

npx gulp

[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:8080/lp
    External: http://192.168.10.101:8080/lp
 ---------------------------------------

URLが切り替わりました！

まとめ

• 下層ページのみのプロジェクトを作る場合は、browser-syncのパスを合わせる必要がある。
• routes、startPathオプションを書くだけで簡単に実現可能。