0

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

11
  • ¿Seguro que es el directorio correcto? ¿Estás usando Node.js como backend?
    – gugadev
    Commented el 21 mar. 2017 a las 0:22
  • Gracias por responder Gustavo. Node es necesario para que funcione gulp y pug. No veo que el directorio este mal. Commented el 21 mar. 2017 a las 18:49
  • No te comenté lo de Node.js por eso porque es obvio si no no correría Gulp. Te lo comenté porque si usas Node.js como backend, entonces la compilación puede ser automática en el servidor.
    – gugadev
    Commented el 21 mar. 2017 a las 19:17
  • Si, disculpa, te respondí cualquier cosa. Ahí agrego mas información en el post. Estoy haciendo pruebas en local. Commented el 21 mar. 2017 a las 19:34
  • Hace mucho no trabajo con Gulp (trabajo con Webpack y FuseBox) pero, según recuerdo allí no estás compilando hasta que se produzcan cambios en los templates. En todo caso, si quisiera que se ejecute la compilación al empezar, deberías empezar con gulp.task('default', ['sass', 'pug', 'serve']);.
    – gugadev
    Commented el 21 mar. 2017 a las 23:10

3 respuestas 3

0

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.

3
  • Gracias por contestar Alex. Con pug no tengo ningún problema, lo que no me funcione es Gulp, o mas bien el plugin que trabaja con pug, Gulp-pug. Ahí agrego algo mas de información. No hay mucho mas que lo que pongo en el post. Commented el 21 mar. 2017 a las 19:28
  • Interesante, sólo para estar seguro esto es Pug ¿verdad? pugjs.org/api/getting-started.html Commented el 21 mar. 2017 a las 19:52
  • Si, antes se llamaba Jade Commented el 21 mar. 2017 a las 20:15
0

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('./'));
 });
0
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('.'))
});

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.