経緯

PCとSPでURLの階層が違うサイトでは問題は起こらないですが、PCとSPで同一URLのサイトを作成する場合、ちょっと開発環境でつまづきました。
これは実装者、そしてクライアントへのプレビューなども円滑に行うためのTIPSです。

公開までの流れ

こちらでフロント側の実装を行う
⬇︎
こちら側のテストサーバーでプレビュー
⬇︎
PC,SPのデータをそれぞれ納品する
⬇︎
クライアントのほうで納品されたhtmlをサーバーサイドに組み込む（独自のシステムか何か）
⬇︎
サーバーサイド側でユーザーエージェントを判別してコンテンツを描画するのでURLは１つ.
http://hoge/aaa/

開発環境

gulpとgulp-pugを使う、ローカルサーバーはnodeで立てる
でもテストサーバーは apache

やりたいこと

・PCとSPのhtmlは同一階層に生成したい
・ローカルでも同一URLで見たい

やったこと

pugで、同一階層にそれぞれPC,SPのデータを出す、でもデフォルトではhtmlしか出せないので少し工夫が必要。
PC→ .html SP→ .htm にすることにしました。

gulpfile.js


  gulp.task('pug_pc', function(){
    gulp.src([paths.root + '/**/*.pug', "!"+ paths.root + '/**/sp_*.pug',"!"+ paths.root + '/**/_*.pug'])
      .pipe(plumber())
      .pipe(pug({
        pretty: true
      }))
      .pipe(gulp.dest(paths.dist))
  });

  gulp.task('pug_sp', function(){
    gulp.src([paths.root + '/**/sp_*.pug'])
      .pipe(plumber())
      .pipe(pug({
        pretty: true
      }))
      .pipe(rename(function(path){
        path.basename = path.basename.replace("sp_","");
        path.extname = path.extname.replace(".html",".htm");
      }))
      .pipe(gulp.dest(paths.dist))
  });

index.pug
sp_index.pug
のようにして、それぞれ、index.html,index.htm
が生成されるようにしました。

次にローカルでのプレビューですが、以下のようにしました。

gulpfile.js

// server
gulp.task("server",function(){
    browser.init({
      server: {
        baseDir: paths.dist,
        middleware: [
          ssi({
            baseDir: paths.dist,
            ext:".html"
          })
        ]
      }
    })
});


gulp.task("server_sp",function(){
    browser.init({
      server: {
        baseDir: paths.dist,
        middleware: [
          ssi({
            baseDir: paths.dist,
            ext:".htm"
          })
        ]
      }
    })
});

タスクをPCとSPで分けたので、
それぞれ、 http://localhost:3000/ とかで見ることができます。

ローカルだとこのままでいいのですが、テストサーバー（apache上）だとこうはいきません。
このままだと、

http://hoge/aaa/ (PC)
http://hoge/aaa/index.htm (SP)

のようになってしまい、例えば、スマフォサイトのaタグ（href="/bbb/"）をクリックするとPCページへ飛びます。
このままではスマフォのプレビューはURLを直で叩くしかありません。

なので、.htaccessに以下のような記述を追加しました。

.htaccess

RewriteEngine On

# スマフォはhtmにリライト
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteCond %{REQUEST_URI} /$
RewriteRule (.*) $1/index.htm

これを行うことでスマフォで以下のURL にアクセスすると
http://hoge/aaa/
URLはそのまま、で
http://hoge/aaa/index.htm
のデータを描画してくれます。

結果

これによって

以下を叩くと、PCだとPCのSPだとSPのデータを読み込む。
http://hoge/aaa/

以下を直接叩くとPCが見える
http://hoge/aaa/index.html
以下を直接叩くとSPが見える
http://hoge/aaa/index.htm

テスト環境でのプレビュー用としては申し分ないと思います。