0

ejecute el generador, instale las dependencias

y al ejecutar gulp serve me muestra la pagina de la siguiente manera y con errores:

introducir la descripción de la imagen aquí

Ok, ¿Como lo solucione?:

en .bowerrc cambie la ruta de bower component por "app/bower_components"

borre la carpeta de bower component que estaba afuera de app y en la terminal escribí bower install (todo dentro de la carpeta del proyecto)

en el archivo gulpfile.js aproximando a la linea 146

gulp.task('bower', function () { 

yo cambie:

.pipe(gulp.dest(yeoman.app + '/views')); 

por

.pipe(gulp.dest(yeoman.app));

Luego aproximado a la linea 165 borre .pipe($.useref({... la primera linea de donde empiezan los .pipe y pegue esto:

      return gulp.src(paths.views.main)
   .pipe($.useref({
    searchPath: [yeoman.app, '.tmp'],
    transformPath: function(filePath) {
    return     filePath.replace('/bower_components','/app/bower_components')
    }
}))

Después me fui al index ubicado en app para ver si estaban los link(rutas) a los .js y .css de las dependencias instaladas dentro de bower, si no están, en consola iniciar el servidor de gulp y escribir: gulp serve y se deberían cargar las rutas automaticamente y solucionado!

si no háganlo manual, Aquí los dejo.

    <!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->

    <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="bower_components/angular-aria/angular-aria.js"></script>
  <script src="bower_components/angular-messages/angular-messages.js"></script>
  <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->

y con eso ya debería de visualizarse sin error.

introducir la descripción de la imagen aquí

Cuando instalen una nueva dependencia debería de ser con --save para que las agregue automaticamente al index.

ej: bower install angular-sweetalert --save

saludos y gracias a todos.

2
  • Hola, @HernanHumaña. Por favor, anexa el contenido de gulpfile.js en tu pregunta.
    – gugadev
    Commented el 28 sept. 2016 a las 18:29
  • ahi lo he agregado Commented el 28 sept. 2016 a las 18:37

2 respuestas 2

2

Al parecer es un bug en el generador, según éste issue en el repositorio de GitHub. El problema según ese mismo hilo es que la tarea serve de gulp no mapea la ruta del directorio bower_components.

La solución según comentarios en ese hilo sería modificar el gulpfile.js para añadir el mapeo estático de los componentes de bower:

gulp.task('start:server', function() {
  $.connect.server({
    root:['./.tmp', yeoman.app],
    livereload:true,
    port: 9000,
    middleware:function(connect, opt){
      return [['/bower_components', 
        connect["static"]('./bower_components')]]
    }
  });
});

busque y cambie la carpeta del bower y la puse dentro de app

El directorio bower_components no debe ir dentro ./app debe ir en la raíz.

4
  • es un bug del generador Commented el 28 sept. 2016 a las 18:37
  • Al parecer sí. Se solucionó tu problema?
    – gugadev
    Commented el 28 sept. 2016 a las 18:38
  • @HernanHumaña Considera marcar la respuesta como aceptada si te sirvió
    – devconcept
    Commented el 28 sept. 2016 a las 20:41
  • re-instale de nuevo, agregué ese gulp.task y aun aparece sin la visual y con los tres errores. :/ Commented el 28 sept. 2016 a las 21:15
0

para que puedas utilizar la carpeta bower_components en distinta ubicación y te la tome el gulp, lo mejor que puedes hacer es editar el archivo .bowerrc y modificando la siguiente línea de directory con la ruta donde se encuentra bower_components.

Por ejemplo:

{   "directory": "src/bower_components" }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.