Я пытаюсь решить проблему, которая беспокоила меня некоторое время.

Сценарий:

Проблема в том, что я использую Gulp для запуска своего локального сервера с Live Reload. Он отлично запускает мое приложение Angular, но когда я вношу изменения в файл, Live Reload (обновление страницы) ломает мое приложение и дает мне «НЕ МОЖЕТ ПОЛУЧИТЬ», потому что мой файл server.js (сервер узла) имеет особый способ перенаправления пользователя к моему файлу "index.html". Причина этого в том, что у меня включен «режим HTML5» в приложении Angular (для красивых URL-адресов), и я должен указать это в файле server.js, чтобы он работал правильно.

До того, как я включил «html5» внутри моего углового приложения, все работало нормально, но из-за специального перенаправления мой файл Gulp.js написан неправильно, чтобы знать об этом.

Однако, если я запускаю «node server.js», угловое приложение работает должным образом и обновляет страницу, эта проблема просто раздражает при разработке.

Вопросы:

• Как я могу написать свой gulpfile.js для правильного запуска файла server.js?
• Есть ли лучший способ написать мой файл server.js?
• Можно ли одновременно запускать несколько портов (режим разработки и режим производства)?

(Я пропустил несколько папок и файлов, чтобы было проще для глаз)

Структура файла:

КОРЕНЬ

• сборка (рабочее приложение angular)
• front (приложение для разработки angular)
• gulpfile.js (исполнитель задач)
• server.js (узел сервера)

Server.js (узловой сервер)

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/front/js'));
app.use('/build', express.static(__dirname + '/../build'));
app.use('/css', express.static(__dirname + '/front/css'));
app.use('/images', express.static(__dirname + '/front/images'));
app.use('/pages', express.static(__dirname + '/front/pages'));

app.all('/*', function(req, res, next) {

    // Sends the index.html for other files to support HTML5Mode
    res.sendFile('/front/index.html', { root: __dirname });
});

var port = process.env.PORT || 8000;
app.listen(port);

Gulpfile ("подключение" начинается в строке 67)

var gulp          = require ('gulp'),
    sync          = require ('browser-sync'),
    bower         = require ('gulp-bower'),
    htmlify       = require ('gulp-minify-html'),
    uglify        = require ('gulp-uglify'),
    prefix        = require ('gulp-autoprefixer'),
    minify        = require ('gulp-minify-css'),
    imgmin        = require ('gulp-imagemin'),
    rename        = require ('gulp-rename'),
    concat        = require ('gulp-concat'),
    inject        = require ('gulp-inject'),
    connect       = require ('gulp-connect'),
    open          = require ('gulp-open');

// Bower Task
gulp.task('bower', function() {
    return bower()
      .pipe(gulp.dest('front/js/vendors'));
});

// HTML Task
gulp.task('html', function(){
    gulp.src('front/**/*.html')
      .on('error', console.error.bind(console))
      .pipe(gulp.dest('build'))
      .pipe(connect.reload());
});

// Styles Task (Uglifies)
gulp.task('styles', function(){
    gulp.src('front/**/*.css')
      .pipe(minify())
      .on('error', console.error.bind(console))
      .pipe(gulp.dest('build'))
      .pipe(connect.reload());
});

// Scripts Task (Uglifies)
gulp.task('scripts', function(){
    gulp.src('front/**/*.js')
      .pipe(uglify())
      .on('error', console.error.bind(console))
      .pipe(gulp.dest('build'))
      .pipe(connect.reload());
});

// Image Task (compress)
gulp.task('images', function(){
    gulp.src('front/images/*')
      .pipe(imgmin())
      .pipe(gulp.dest('build/images'))
      .pipe(connect.reload());
});

// Connect Task (connect to server and live reload)
gulp.task('connect', function(){
    connect.server({
      root: 'front',
      livereload: true
    });
});

// Watch Task (watches for changes)
gulp.task('watch', function(){
    gulp.watch('front/*.html', ['html']);
    gulp.watch('front/js/*.js', ['scripts']);
    gulp.watch('front/css/*.css', ['styles']);
    gulp.watch('front/images/*', ['images']);
});

// Open Task (starts app automatically)
gulp.task("open", function(){
  var options = {
    url: "http://localhost:8080",
    app: "Chrome"
  };
  gulp.src("front/index.html")
  .pipe(open("", options));
});

gulp.task('default', ['html', 'styles', 'scripts', 'images', 'connect', 'watch', 'open']);

Приложение Angular

// App Starts
angular
    .module('app', [
        'ui.router',
        'ngAnimate',
        'angular-carousel'
    ])
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
            // Home Page
            .state('home', {
                url: '/',
                templateUrl: 'pages/home.html',
                controller: 'homeCtrl'
            })

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    }])

Index.html

    <!DOCTYPE html>
    <html class="no-js" ng-app="app" ng-controller="mainCtrl">
    <head>
        <title>Website</title>
        <meta charset="utf-8"/>

        <!-- Universal Stylesheets -->
        <link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
        <!-- Sets base for HTML5 mode -->
        <base href="/"></base>
    </head>

    <body>
      <section class="row main" ui-view></section>

        <!-- Javascript -->
        <script src="js/scripts.js"></script>
    </body>

    </html>

Заранее спасибо за вашу помощь!