使用 .htaccess 的 Node.js/Gulp 的漂亮 URL？

Question

我正在部署一个带有远程共享主机的静态网站。每个页面都有一个 .html 扩展名，我想从 URL 中删除它以使它们更漂亮。

所以我将以下 .htaccess 文件添加到托管服务器上网站目录的根目录：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]

这在托管网站上完美运行，即当我输入 url mywebsite.com/page 时，服务器会显示 mywebsite.com/page.html 而不会在 URL 中显示。

我遇到的问题是我正在使用带有 LiveReload 的 Gulp 开发网站。这是我的 gulpfile.js：

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var pkg = require('./package.json');

// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
  gulp.src([
      'node_modules/bootstrap/dist/**/*',
      '!**/npm.js',
      '!**/bootstrap-theme.*',
      '!**/*.map'
    ])
    .pipe(gulp.dest('vendor/bootstrap'))

  gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
    .pipe(gulp.dest('vendor/jquery'))

  gulp.src(['node_modules/popper.js/dist/umd/popper.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest('vendor/popper'))

  gulp.src(['node_modules/jquery.easing/*.js'])
    .pipe(gulp.dest('vendor/jquery-easing'))
})

// Default task
gulp.task('default', ['copy']);

// Configure the browserSync task
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: ''
    },
    notify: false
  })
})

// Dev task with browserSync
gulp.task('dev', ['browserSync'], function() {
  // Reloads the browser whenever HTML or CSS files change
  gulp.watch('css/*.css', browserSync.reload);
  gulp.watch('js/*.js', browserSync.reload);
  gulp.watch('*.html', browserSync.reload);
});

现在，当我使用 gulp dev 启动开发环境时，指向 mywebsite.com/page 的所有链接都已损坏。所以 Gulp 开发服务器不会像我的托管服务器那样将 .html 附加到 URL。

有没有什么办法可以修改开发环境，让我使用gulp dev时，美化的URL也可以工作？

Answer 1

这可以使用BrowserSync Options 轻松完成（无需 MAMP 或 mod_rewrite）：

server: {
baseDir: "app",
routes: {
    "/some_page": "app/some_page.html"
    }
}

找到here。