启动Node.js服务器W / GULP“连接”rest实时刷新（Angular应用W / HTML5模式）

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

场景：

问题是当我用Gulp启动我的本地服务器W / Live Reload。 它启动我的Angular应用程序就好了，但是当我更改文件Live Reload（页刷新）打破我的应用程序，并给了我一个“无法获得”，因为我的server.js（节点服务器）文件有一个特殊的方式，它redirect用户到我的“index.html”文件。 原因是因为我在Angular应用程序中启用了“HTML5模式”（对于漂亮的URL），我必须在server.js文件中指定它以正常工作。

在我的angular度应用程序里面的“html5 on”之前，一切正常，但是由于特殊的redirect，我的Gulp.js文件没有被正确写入以便知道这一点。

如果我运行“node server.js”，angular度应用程序按预期工作，并刷新页面，这只是在开发时遇到这个问题而烦人。

问题：

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

（我遗漏了几个文件夹和文件，使其更容易在眼睛）

文件结构：

根

  • build立（angular生产应用程序）
  • 前（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>

在此先感谢您的帮助！

这是一个相当好的解决scheme:)

这是你应该使用的： 

 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有一个很好的解决scheme来避免设置基础href 

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