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
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP