uglify - AngularJS html5Mode utilizando Grunt connect. gruñido 0.4.5
install grunt mac (4)
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 %>''
]
}
}
}
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.
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)
$ npm install connect-modrewrite --save
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 :)
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'');
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
},
//...
},
//...
}