ものすごくニッチな内容です。
ものすごーくニッチな内容です。
ものすごーーくニッチな内容です。
同じ悩みを持つ人が世の中に1人くらいいるかなと。
今回はその1人のためだけに書きます。
とある案件で、
- htmlでテンプレートを作成して納品、その後システム屋さんがCMSに組み込む
- 最終的な拡張子は「.html」じゃなくて「.aspx」になる
- 運用も行う。その際は管理画面から更新部分のhtmlを貼り付ける
というものがありました。
普段、開発は基本的にgulpでjadeとscssとbrowser-syncでごにょごにょしてるんですが・・・
ナビなどのリンクを「hoge/hoge.html」にすると出力されたソースをCMSに貼り付けられないんですよね。
なんせ本番は「hoge/hoge.aspx」なので。
かといって「.aspx」にしておくと、ローカルでリンクが繋がらなくて、ちょっと嫌な感じじゃないですか。
まあべつに、出力後一括置換してから貼り付けてもいいんですけど、1秒でも早く作業終わらせてタバコ吸いたい僕にはそんな時間はないんです。
で、考えました。
「なんかこういい感じにリダイレクト的なあれをgulpであれしたらいけるんちゃうけ？」と。
いろいろ試して、（リダイレクトではないんですが）最終的にこうなりました。
関係ありそうなとこだけ抜粋です。
以下、gulpfile.jsです。今回の内容に関連する部分だけ抜粋しています。
var gulp = require('gulp');
var browserSync = require('browser-sync');</code>
// 中略
gulp.task('server', function () {
browserSync.init({
server: {
baseDir: 'htdocs',
middleware: [
function(req,res,next){
if (req.url.match('.aspx')) {
req.url = req.url.replace('.aspx','.html');
}
next();
}
]
}
});
});
// 以下略
なにをしているかと言いますと・・・
browser-sync の middleware を使って、リクエストのURLを書き換えています。
「hoge.aspx」を「hoge.html」としてリクエストしている感じですね。
詳しくはドキュメントをご覧ください。
https://www.browsersync.io/docs/options#option-middleware
【注意】
「.aspx」という拡張子を動かしているわけではありません。
同じ名前の「.html」を表示しているだけです。
省略できた時間でタバコを・・・あ、いえ、次の案件進めます。