angularjs - Activos que faltan en la aplicación Angular construida con grunt

yeoman angularjs

Question

He construido una aplicación utilizando Yeoman y AngularJS (y todas las cosas que la acompañan, como Grunt y Bower).

Todo funciona perfectamente cuando se ejecuta localmente utilizando el grunt serve . Sin embargo, después de ejecutar grunt e implementar la aplicación, faltan un par de recursos y no estoy seguro de cuál es la mejor manera de resolverlos.

En primer lugar, la ejecución de Grunt parece copiar las imágenes a través de dist, pero las cambia de nombre sin ajustar las referencias en el CSS. app/images/uparrow.png convierte en dist/images/3f84644a.uparrow.png .

Aquí hay una línea del main.scss:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

Cuando se compila en CSS durante el proceso de construcción, no vuelve a escribir la ruta, por lo que el navegador intenta cargar dist/images/uparrow.png que falta.

En segundo lugar, hay un problema con la carga de las fuentes para el complemento Bootstrap. El CSS bootstrap en la app/bower_components/bootstrap/dist/css/bootstrap.css referencia a ../fonts/glyphicons-halflings-regular.woff . La ruta relativa se resuelve en app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof y eso funciona perfectamente.

Sin embargo, una vez creado, el proveedor CSS se combina y minimiza en un solo archivo CSS en dist/styles/8727a602.vendor.css . Sin embargo, la ruta relativa a la fuente no se vuelve a escribir. Por lo tanto, intenta buscar fuentes en la carpeta dist/fonts , en lugar de dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof donde está el archivo.

Cualquier consejo muy apreciado.

Answer 1

Encontré una solución clara para el problema de CSS: SCSS tiene funciones incorporadas para imágenes y esto reescribirá automáticamente las rutas a los activos:

.table.sortable th.sorted-asc        { background-image: image-url(''uparrow.png''); }

Answer 2

Te enfrentas a errores de Yeoman con la tarea de build que aún no está solucionada. Creo que no hay soluciones limpias, así que aquí hay algunas soluciones.

Primero, imagen rev:

Simplemente elimine las imágenes de la tarea rev y estará listo para comenzar.

rev: {
  dist: {
    files: {
      src: [
        ''<%= yeoman.dist %>/scripts/{,*/}*.js'',
        ''<%= yeoman.dist %>/styles/{,*/}*.css'',
        // ''<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'', <- remove that line
        ''<%= yeoman.dist %>/styles/fonts/*''
      ]
    }
  }
},

En segundo lugar, las fuentes bootstrap-sass no se copian en la carpeta dist. Pasé horas en este error y no pude encontrar una solución adecuada. Finalmente decidí agregar una nueva regla a la tarea de copy :

copy: {
  dist: {
    files: [{
      // your existing rules...
    },
    // add this rule to copy the fonts:
    {
      expand: true,
      flatten: true,
      cwd: ''<%= yeoman.app %>'',
      dest: ''<%= yeoman.dist %>/fonts'',
      src: [''bower_components/sass-bootstrap/fonts/*.*'']
    }]
  },
  ...
}

Ejecute grunt build nuevamente después de estos cambios y debería funcionar.

Answer 3

Tuve exactamente el mismo problema y lo resolví por:

1) Agregue a la tarea de copia (dentro del gruntfile) las fuentes bootstrat: {expand: true, cwd: ''src / main / webapp / bower_components / bootstrap / dist'', src: ''fonts / *'', dest: ''<% = yeoman.dist%> / asset / ''} Eso copiará las fuentes bootstrap en su carpeta dist / assests / fonts.

2) Elimine la tarea cssmin o comente el parámetro raíz. Eso debería resolver tu problema con respecto a los caminos.

Para obtener más información, consulte esta publicación que incluye una explicación detallada: [ http://ignaciosuay.com/how-to-avoid-grunt-build-not-loading-bootstrap-glyphicons-using-jhipster/

Answer 4

cssmin con opción de raíz reemplaza todas las rutas relativas.

puede desactivar la opción raíz de cssmin en su archivo Gruntfile.js

cssmin: {
  options: {
    //root: ''<%= yeoman.app %>''
  }
},