uglify - AngularJS html5Mode utilizando Grunt connect. gruñido 0.4.5

install grunt mac

Question

Recientemente cambié a grunt 0.4.5 y cambió cómo funciona la conexión.

Anteriormente utilicé connect-modrewrite y funcionó bastante bien (tuve algunos problemas con las URL generadas por el parámetro /:).

Aquí está la versión antigua que funcionó con grunt 0.4.1 desde generator-angular 0.8.0 con la parte de middleware modificada por mí para usar html5mode.

connect: {
options: {
port: 9000,
hostname: ''*IP HERE*'',
livereload: 35729,
middleware: function (connect, options) {
var optBase = (typeof options.base === ''string'') ? [options.base] : options.base;
return [require(''connect-modrewrite'')([''!(//..+)$ / [L]''])].concat(
optBase.map(function(path){ return connect.static(path); })
);
}
},
livereload: {
options: {
open: true,
base: [
''.tmp'',
''<%= yeoman.app %>''
]
}
},

Aquí está la nueva versión del generador-angular 0.9.0-1.

connect: {
options: {
port: 9000,
hostname: ''*IP HERE*'',
livereload: 35729
},
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
connect.static(''.tmp''),
connect().use(
''/bower_components'',
connect.static(''./bower_components'')
),
connect.static(appConfig.app)
];
}
}
},

¿Cómo puedo cambiar esto para usar mod-rewrite o cualquier otro método para lograr html5mode?

Intenté usar el método proporcionado aquí: https://gist.github.com/nnarhinen/7719157 Lo combiné para crear lo siguiente:

middleware: function (connect) {
return [
connect.static(modRewrite([''^[^//.]*$ /index.html [L]''])),
connect.static(''.tmp''),
connect().use(
''/bower_components'',
connect.static(''./bower_components'')
),
connect.static(appConfig.app)
];
}

Esto me permite ver la vista normal, pero la parte modRewrite no parece hacer lo que necesita para acceder a cualquier otra vista a través de la URL.

Answer 1

Aquí está mi solución, adaptada a generator-angular configuración de generator-angular , pero se puede utilizar en cualquier lugar. Permite una sintaxis de reescritura (la parte interesante es la configuración de carga de datos de ejemplo).

connect: {
options: {
port: 9000,
// Change this to ''0.0.0.0'' to access the server from outside.
hostname: ''localhost'',
livereload: 35729,
// Modrewrite rule, connect.static(path) for each path in target''s base
middleware: function (connect, options) {
var optBase = (typeof options.base === ''string'') ? [options.base] : options.base,
middleware = [require(''connect-modrewrite'')([''!(//..+)$ / [L]''])]
.concat(optBase.map(function (path) {
if (path.indexOf(''rewrite|'') === -1) {
return connect.static(path);
} else {
path = path.replace(////g, ''/'').split(''|'');
return connect().use(path[1], connect.static(path[2]))
}
}));
return middleware;
}
},
livereload: {
options: {
open: true,
base: [
''.tmp'',
''rewrite|/bower_components|./bower_components'',
''rewrite|/app/styles|./app/styles'', // for sourcemaps
''<%= yeoman.app %>''
]
}
}
}

Answer 2

Aunque por encima de la respuesta aceptada es correcta. Estoy agregando la configuración que utilizo, funciona perfectamente en CentOs.

Los pasos siguientes de 1 a 3 son para hacer que la URL limpia de Angularjs funcione en su máquina local utilizando $ grunt serve

Pero si desea que funcionen bien en el Servidor, especialmente nginx , también necesitará actualizar la configuración de nginx. (etapa 4)

1. $ npm install connect-modrewrite --save

2. Edite su archivo gruntfile.js. Añadir en la parte superior del archivo

   var modRewrite = require(''connect-modrewrite'');

Entonces en tu middleware :

middleware: function (connect) {
return [
modRewrite([''^[^//.]*$ /index.html [L]'']),
connect.static(''.tmp''),
connect().use(''/bower_components'',
connect.static(''./bower_components'')),
connect.static(config.app)
];
}

por ejemplo

// Generated on 2015-11-09 using generator-angular 0.14.0
''use strict'';
// # Globbing
// for performance reasons we''re only matching one level down:
// ''test/spec/{,*/}*.js''
// use this if you want to recursively match all subfolders:
// ''test/spec/**/*.js''
var modRewrite = require(''connect-modrewrite'');
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require(''time-grunt'')(grunt);

3. Luego vaya al middleware Livereload, agregue modRewrite

livereload: {
options: {
middleware: function (connect) {
return [
modRewrite([
''^[^//.]*$ /index.html [L]''
]),
connect.static(''.tmp''),
connect().use(''/bower_components'', connect.static(''./bower_components'')),
connect.static(config.app)
];
}
}
},

4.Editar la configuración de NGINX:

server {
server_name yoursite.com;
root /usr/share/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}

Espero eso ayude :)

Answer 3

Si alguien más se tropieza con esto, aquí está la solución:

(La única línea agregada fue la línea modRewrite)

livereload: {
options: {
open: true,
middleware: function (connect) {
return [
modRewrite([''^[^//.]*$ /index.html [L]'']),
connect.static(''.tmp''),
connect().use(
''/bower_components'',
connect.static(''./bower_components'')
),
connect.static(appConfig.app)
];
}
}
},

Asegúrese de tener lo siguiente declarado en la parte superior de su archivo grunt:

var modRewrite = require(''connect-modrewrite'');

Answer 4

Teniendo en cuenta que otras respuestas son bastante detalladas y no conservan los middlewares predeterminados de grunt-contrib-connect , se me ocurrió una solución que utiliza middleware dedicado: connect-history-api-fallback :

npm install connect-history-api-fallback --save-dev

var history = require(''connect-history-api-fallback'')
//...
connect: {
options: {
middleware: function(connect, options, middleware) {
middleware.unshift(history())
return middleware
},
//...
},
//...
}