场景：

Question

我试图解决一段时间以来困扰我的问题。

场景：

问题是我使用Gulp启动我的本地服务器w / Live Reload。它启动我的Angular应用程序就好了，但是当我更改文件时，Live Reload（页面刷新）会破坏我的应用并给我一个＆＃34;无法获取＆＃34;因为我的server.js（节点服务器）文件有一种特殊的方式，它将用户重定向到我的＆＃34; index.html＆＃34;文件。这是因为我有＆＃34; HTML5模式＆＃34;在Angular应用程序中启用（对于漂亮的URL＆＃39; s），我必须在server.js文件中指定它以使其正常工作。

在我转身＆＃34; html5之前＆＃34;在我的角度应用程序内部一切正常，但由于特殊的重定向我的Gulp.js文件没有正确写入以了解这一点。

如果我运行＆＃34;节点server.js＆＃34;然而，角度应用程序按预期工作并获得页面刷新，在我开发时遇到这个问题只会令人恼火。

的问题：

如何编写gulpfile.js以正确运行server.js文件？
有没有更好的方法来编写我的server.js文件？
是否可以同时运行多个端口（开发模式和生产模式）？

（我已经遗漏了一些文件夹和文件，以方便眼睛使用）

文件结构：

ROOT

构建（角度制作应用）
前（角度开发应用）
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（＆＃34;连接＆＃34;从第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

// 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>

提前感谢您的帮助！

Answer 1

这是一个相当不错的解决方案：）

以下是您应该使用的内容：

gulp.task('connect', connect.server({
  root: ['build'],
  port: 9000,
  livereload: true,
  open: {
    browser: 'Google Chrome'
  },
   middleware: function(connect, opt) {
      return [ historyApiFallback ];
    }
}));

这是我用于SPA开发的模块：

"connect-history-api-fallback": "0.0.5",

AngularJs也有一个简洁的解决方案，可以避免设置基础href

$locationProvider.html5Mode({enabled: true, requireBase: false})

启动Node.js服务器w / Gulp＆＃34; connect＆＃34;实时重新加载中断（Angular app w / html5模式）

场景：

的问题：

文件结构：

1 个答案: