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
        },
        //...
    },
    //...
}