Красивые URL-адреса с Node.js/Gulp с использованием .htaccess?

Я развертываю статический веб-сайт с удаленным общим хостингом. Каждая страница имеет расширение .html, которое я хотел удалить из URL-адресов, чтобы сделать их красивее.

Поэтому я добавил следующий файл .htaccess в корень каталога веб-сайта на хостинг-сервере:

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

Это отлично работает на веб-сайте хостинга, т. Е. Когда я ввожу URL-адрес mywebsite.com/page, сервер отображает mywebsite.com/page.html, не показывая его в URL-адресе.

У меня проблема в том, что я разрабатываю сайт, используя Gulp с LiveReload. Это мой 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-адресам, как это делает мой хостинг-сервер.

Есть ли способ изменить среду разработки, чтобы преттифицированные URL-адреса также работали, когда я использую gulp dev?


node.js gulp .htaccess livereload
person nemesis    schedule 19.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это можно легко сделать (без MAMP или mod_rewrite) с помощью параметров BrowserSync:

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

Найдено здесь.

person ekntrtmz    schedule 18.06.2018