TransWikia.com

Gulp-pug no funciona

Stack Overflow en español Asked by Pablo Dominguez on December 23, 2021

Estoy probando gulp y en particular el plugin gulp-pug para compilar Pug. No parece tener mucha ciencia el hacerlo funcionar pero sin embargo no hay forma.

No estoy realizando ningún proyecto, simplemente estoy probando el ‘task runner’ Gulp y en particular el plugin Gulp-pug (que es lo que no me funciona)

Mi gulpfile es el siguiente:

'use strict'

var gulp = require('gulp');
var browserSync = require("browser-sync").create();
var pug = require('gulp-pug')
var sass = require('gulp-ruby-sass');

gulp.task('sass', function () {
  sass('./scss/**/*.scss')
    .on('error', sass.logError)
    .pipe(gulp.dest('./css'))
});

gulp.task('pug', function () {
  gulp.src('./pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./'))
});

gulp.task('serve', function() {
  browserSync.init({
    server: "./"
  });
  gulp.watch("./scss/**/*.scss", ['sass']);
  gulp.watch("./pug/**/*.pug", ['pug']);
  gulp.watch(["./*.html", "./css/*.css"]).on('change', browserSync.reload);
  gulp.watch("./js/*.js").on('change', browserSync.reload);
});

gulp.task('default', ['serve']);

Por supuesto tengo instalado Pug y funciona perfectamente. Lo e utilizado con grunt y desde consola sin problema.

No tira ningun error, solo pone

Starting 'pug'...
Finished 'pug' after 12 ms

Pero ni rastros del .html

Entiendo que no esta conectando con Pug y por lo tanto no hace nada. pero no se como solucionarlo.

Agrego un poco mas de informacion.

El archivo que debria compilarse (o traspilar) es el siguiente:

doctype html
html(lang="es")
  head
    meta(charset="utf-8")
    title Prueba
  body
    .wrapper
      header.hidden
        h1 HOLA MUNDO

Que como se ve no tiene nada extraño.

y la estructura de archivos.

/:.
|   gulpfile.js
|   package.json
|   
+---css
|       style.css
|       
+---node_modules
|   +--- etc...
|       
---pug
    |   index.pug

Omito todo el contenido de la carpeta ‘node modules’ porque es demasiado extenso y no aporta demasiado que este.

Saludos

3 Answers

gulp.task('pug', function () {
  gulp.src('./pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./'))
});

prueba quitando el '/'

te debe quedar asi en la raiz del proyecto

gulp.task('pug', function () {
  gulp.src('./pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('.'))
});

Answered by Carlos Jordan Hernandez Alvara on December 23, 2021

Debo suponer que los módulos están bien instalados.

Partiendo tengo una observación: Aunque hice una prueba con proyecto con una distribución similar no me dio error, a pesar de que no incluí el ";" al finalizar la instrucción en el require('gulp-pug') como lo tienes.

Ahora, no veo que el código este mal, pero te comparto 2 versiones mis tareas en gulp que he manejado y que me han funcionado tanto para .jade como para .pug.

Este es para el .jade

 var gulp = require('gulp');
 var jade = require('gulp-jade');

 gulp.task('views', function() {
    var YOUR_LOCALS = {};
    // -------------------------------------  
    gulp
       .src('./src/jade/*.jade')
       .pipe(jade({
             locals: YOUR_LOCALS,
             pretty: true
       }))
      .pipe(gulp.dest('./'));
 });

Este para el .pug

 var gulp = require('gulp');
 var pug = require('gulp-pug');

 gulp.task('views', function (){ 
    // ------------------------------------- 
    gulp.src('./pug/*.pug', { base: './pug/' })
        .pipe(pug({ 
            locals: {}, 
            pretty: true 
        }))
        .pipe(gulp.dest('./'));
 });

Answered by HarleySG on December 23, 2021

Que tal buenas tardes.

No conozco Pug pero por lo que veo es un template system y como tal necesita datos (contexto) para poder ser usado.

Según su documentación el método de compilación sólo te devolverá una función, que podrá ser llamada más adelante con los datos de tu aplicación:

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));

¿Tendrás tu código en algún repositorio en Github para poderle dar un vistazo?

Saludos cordiales.

Answered by alex-arriaga on December 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP