0

tengo una estructura de archivos y automatizacion de tareas con gulp.

Cuando corro la tarea default si me lee todos los archivos css incluyendo los que mando llamar de node_modules, pero cuando agrego la tarea browser-sync y corro de nuevo gulp no me lee ningun archivo css dejo a continuacion el codigo.

Estructura de archivos:

- build 
 -- development
  -- css 
  -- js 
  -- img 
  -- index.html 
- node_modules 
 -- animate.css
 -- (muchas otras) 
- src 
 -- templates 
 -- sass 
 -- img 
 -- js 

En la carpeta templates tengo las vistas echas en con pug (jade)

Archivo gulp:

'use stric';

const gulp         = require("gulp"),
      pug          = require("gulp-pug"),
      sass         = require("gulp-sass"),
      babel        = require("gulp-babel"),
      imagemin     = require("gulp-imagemin"),
      svgmin       = require("gulp-svgmin"),
      webp         = require("gulp-webp"),
      useref       = require("gulp-useref"),
      concat       = require("gulp-concat"),
      uncss        = require("gulp-uncss"),
      autoprefixer = require("gulp-autoprefixer"),
      cleanCSS     = require("gulp-uglify"),
      uglify       = require("gulp-uglify"),
      htmlmin      = require("gulp-htmlmin"),
      browserSync  = require("browser-sync").create();
      env          = process.env.NODE_ENV || "development",
      dir          = {
        src        : "src",
        build      : "build/development",
        production : "build/production",
        nm         : "node_modules"
      },
      files        = {
        CSS  : [
          `${dir.nm}/animate.css/animate.min.css`,
          `${dir.nm}/owl.carousel/dist/assets/owl.theme.default.min.css`,
          `${dir.build}/css/main.css`
        ],
        mCSS : "estilos.min.css",
        JS   : [
          `${dir.nm}/jquery/dist/jquery.min.js`,
          `${dir.nm}/owl.carousel/dist/owl.carousel.min.js`,
          `${dir.nm}/wowjs/dist/wow.min.js`,
          `${dir.nm}/js/codigos.lojs`,
        ],
        mJS  : "codigos.min.js"
      },
      opts         = {
          pug : {
            pretty : true,
            locals : {
              title : "Titulo Loco",
              files : files
            }
          },
          sass : {
            outputStyle : "compressed"
          }
      };

// Task Pug
gulp.task("pug", () => {
  gulp
    .src( `${dir.src}/pug/*.pug`)
    .pipe( pug(opts.pug) )
    .pipe(gulp.dest(`${dir.build}`))
    .pipe(browserSync.reload({stream : true}));
});

// Task sass
gulp.task("sass", () => {
  gulp
    .src( `${dir.src}/sass/*.scss`)
    .pipe( sass(opts.sass) )
    .pipe(gulp.dest(`${dir.build}/css`));
});

// Task watch
gulp.task("watch", () => {
  gulp.watch(`${dir.src}/pug/*.pug`, ["pug"]);
  gulp.watch(`${dir.src}/sass/*.scss` , ["sass"]);
});

//Task server
gulp.task("server", () => {
  browserSync.init({
    server : `${dir.build}`
  })
});

// Task default
gulp.task("default", ["pug", "sass", "server", "watch"]);

Archivo pug (html)

<!DOCTYPE html>
html(lang="es")
head
  meta(charset="UTF-8")
  title Document
  each css in files.CSS
    link(rel="stylesheet", href=`../../${css}`)
body
  h1 probando desde jade
  p hola mundo
  each js in files.JS
    script(src=`../${js}`)

El codigo ejecutado con la tarea default eliminando la tarea server llama sin problema todos los archivos, pero al crear el server no llama los css

4
  • podrías especificar parte del error que te aparece? Commented el 16 oct. 2016 a las 18:20
  • no sale ningun error, solo cuando visualizas el archivo en localhost:3000 no se ven los css no carga nincun css Commented el 16 oct. 2016 a las 19:39
  • browserSync es una herramienta para el desarrollo, y en la tarea server estas apuntando a tus archivos construidos build. No deberías ver los cambios realizados en tus archivos scss (src) en ves de apuntar a los css (dir) directamente? Commented el 16 oct. 2016 a las 22:12
  • si, pero los archivos de src, con la tarea pug y sass se crean ya compilados dentro de build/development. Mandar llamar el css de ahi no tengo problema, el detalle es que la carpeta hermana de build es decir node_modules tiene estilos css que necesito llamar, pero cuando los mando llamar no los reconoce ** <link rel="stylesheet" href="../../node_modules/animate.css/animate.min.css"/> <link rel="stylesheet" href="../../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"/>** Commented el 16 oct. 2016 a las 23:22

2 respuestas 2

0

Trata de pasar los parámetros routes y baseDir en el objeto server:

server: {
    baseDir: '${dir.build}',
    routes: {
        "/node_modules": '${dir.nm}',
    }
}

Luego incluye los estilos asi

<script src="node_modules/animate.css/animate.min.css"></script>
2
  • Perfecto muchas gracias, con esto resolví. Saludos JoseAPL Commented el 17 oct. 2016 a las 11:16
  • @salvadorGodinez puedes marcar la respuesta como resuelta en ese caso, ayudara a la comunidad a saber que respuesta es valida a tu problema Commented el 17 oct. 2016 a las 13:16
0

Quizás no sea un problema de gulp. Deberías fijarte si se puede acceder a esos .css desde la URL escribiendo directamente en el navegador:

localhost:3000/../../etc...css

con la URL esperada

1
  • El problema esta que sin la tarea server si funciona, solo cuando agrego la tarea server deja de funcionar (de cargar los css) Commented el 16 oct. 2016 a las 21:24

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.