Repaso de PUG

doctype html
html
    head
        title usando pug-gulp
        meta(charset="utf-8")
        meta(viewport="")
        link( rel="stylesheet" href="css/main.css" )
     
    body
        header.header#encabezado
            ul
                li: a(href="#") Inicio
                li: a(href="#") Nosotros
                li: a(href="#") Servicios
                li: a(href="#") Contactenos

        //-CONTROL DE TEXTO
        main.main
        section.section2
            p hola soy un simple texto
            | de ejemplo
            spam span
            b negrita
            i italico
         
        //-CONDCIONALES
        -var edad=17;
        if(edad<0)
            p edad incorrecta
        else if(edad<18)
            p menor de edad
        else
            p mayor de edad
         
         
        //-ATRIBBUTOS
        section
            p(class="clase2" id="parrafo1") primera forma
            p.clase3#parrafo2 segunda forma
            p(
                class="clase3"
                id="parrafo3"
            ) tercera forma
        //-VARIABLES
        - let nombre='luis muñoz';
        - let numeros=[2,4,6,8,10];
        each val in numeros
            p=val
         
     
     
        -let menu = ['inicio','contacto','portafolio','ayuda'];
            each list in menu
                li: a(href="#")=list
     
        //-INTERPOLACION DE VARIABLE
        p #{nombre}
     
        //-INTERPOLACION DE ATRIBUTOS
        -let enlace="http://www.youtube.com";
        -let imagen="img/banner1.jpeg";
     
        a(href=enlace) youtube
        img(src="dev/" + imagen)
         
     
        //-ATRIBUTOS DE ESTILOS (string u objeto js)
        p(style="color:red; background:black ") soy un estilo
     
        p(style={
            color: 'red',
            background: 'blue',
            'font-size': '50px',
            padding: '5px'
        }) segunda forma como objeto de js
 
        //-ATRIBUTOS DE CLASE (String o Array)
        p(class="texto rojo") texto string
        p(class=['rojo', 'centrado']) texto array
        -var clases = ['rojo', 'centrado', 'subrayado'];
        p(class=clases)
        br
        // Clase e Id Literal 
        a.azul(class=clases) link
     
        a#top(class=clases) id literal
     
        //-&attributes({})
        p&attributes({
            'data-link':'false',
            'data-text':'true',
            'style':'color:red; background: green'
        }) texto con atributos especiales
        p.clase10#id12&attributes({
            'data-link':'false',
            'data-text':'true'
        })
        //-COMENTARIOS
     
        // esto es un comentario para html en linea
        //
            comentario en bloque para
            el archivo html XD
        //- esto es un comentario para el archivo .pug
         
        //-CASE (Case var when & default)
        -var edad = 18;
        case edad
            when 0
                p tienes 0 años
            when 1
                p tienes un año
            when 2
                p tienes 2 años
            default
                p tienes mas de 3 años

        //- APILAR CASOS
        -var estatura=1;
        case estatura
            when 1
            when 2
            when 3
            when 4
            when 5
            when 6: p tienes estatura gigante
            default: p tienes estatura muy gigante
     
     
        //- DATOS BOOLEAN
        -var verdadero = true;
        -var falso = false;
     
        //-CONDICIONALES (if - unless)
        if(verdadero=== true)
            p verdad
 
        -var edad = 19;
        if(edad<=16)
            p no tienes permiso
        else if(edad > 16 && edad <=20)
            p tienes permiso
        else
            p no estas autorizado
     
        //- ITERACION EACH
     
        -var lista =['item1', 'item2', 'item3','item4'];
        ul
            each valores in lista
                li: a(href="#")=valores
             
 
     
        //- WHILE con Operadores de Incremento y Decremento
        -var  veces=5;
        while (veces < 11)
           p hola
           -veces++
         
        //- UNLESS (inversa if) - si es false ejecuta 
        - let paginas='siempre';
        unless !(paginas === "siempre")
            p verdaderasa

        //- WHILE condicion var--
        //- var cantidad = 3;
        //while (cantidad--)
            p#{cantidad}
         
            //- MIXINS - funciones que permiten crear código reusable
            //- MIXINS con Argumentos
            //- MIXINS con Bloques
            //- MIXINS y Atributos
            //- Resto de Argumentos
     
        mixin listado_tareas
            ul
                li Estudiar
                li programar
                li hacer ejercicios
        //llamar mixin
        +listado_tareas
        +listado_tareas
     
        mixin imprimir(texto)
            p.clase=texto
         
        +imprimir('hola mundo')
        +imprimir('probando texto para el mixin con parametros')
        //mixin en bloque
        mixin section(titulo)
            section
                .wrap 
                    h1.titulo1=titulo
                    if block
                        block
                    else
                        p no hay contenido en bloque q mostrar
        +section('titulo de la seccion')
     
        //-llamando mixin en bloque
        +section('titulo de seccion2')
            p este es un texto en bloque q sera usado despues de ser llamado el mixin seccion qwerty
        //-mixin con atributos
        mixin atributo(titulo)
            section&attributes(attributes)
                h1.titulo2= titulo
     
        +atributo('titulo mixin con atributos')(class="centrado container")


        //- mixin con varios argumentos
        mixin lista(id, ...items)
            ul(id=id)
                each item in items
                    li= item
                 
        +lista('listado', 'programar','ejercicio','ejecutar')
     
     
        //- INCLUDE TEXTO PLANO
        p: include ./dev/texto.txt
     
        //- HERENCIA
        //- heredar desde otro archivo .pug
     
        extends ./dev/plantilla

        // en el archivo de plantilla deberá tener bloques predefinidos para poder llamarlos y editarlos
        //lo llamamos asi:::
            block head   //reemplazara todo el contenido que había en el bloque predefinido head
                title usando block

            append head    //agregara al final del contenido del bloque predefinido head
                title agregando append

            prepend head  //agregara al inicio del contenido del bloque predefinido head
               title agregando prepend

Gulp - Sass - Pug - BrowserSync

Integrando Gulp - Sass - Pug - BrowserSync

En esta ocasion vamos a integrar Gulp, Sass, Pug y BrowserSync. Para trabajar con un solo archivo los pre-procesadores de html y css en conjunto.
Esto nos ayudara a realizar nuestros proyectos de una forma ordenada y comoda.

Estos tecnologias estan basadas en nodeJS, y por consiguiente en JavaScript, es por eso que la configuracion (codificacion de gulp) se asemeja a javascript.

Pre-Requisitos

1 debes tener instalado nodeJS (verificar: node --version y npm --version)
2 instalar gulp globalmente:
npm install -g gulp
3 crear una directorio para tu proyecto
4 crear un archivo package.json en el directorio
npm init -y
5 instalar gulp localmente
npm install --save-dev gulp


6 configurar el archivo: gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass');
const pug = require('gulp-pug');
const browserSync = require ('browser-sync');

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

gulp.task('sass', function(){
  gulp.src('./scss/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('./app/css/'))
  .pipe(browserSync.stream());
});

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

Gulp - Sass - BrowserSync

Instalando sass en gulp 

en esta oportunidad vamos a utilizar un plugin de gulp llamado gulp-sass, el cual nos ayudara a compilar el archivo .scss y convertirlo a un archivo .css y para ver los cambios en tiempo real usaremos Browser Sync.

Requisitos previos

1 tener instalado node.js
2 tener instalado gulp global y localmente (package.json - pugfile.js)
3 Instalar pug (plugin de sass para gulp)
npm install gulp-sass --save-dev
4 configurar el archivo pugfile.js, agregando el sass

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require ('browser-sync');

gulp.task('default',['sass'], function(){
  browserSync.init({
    server:'./app'
  });
  gulp.watch('./*.scss',['sass']);
});

gulp.task('sass', function(){
  gulp.src('./*.scss')
  .pipe(sass())
  .pipe(gulp.dest('./app/css/'))
  .pipe(browserSync.stream());
});

gulp.task('sasscss',['sass'], function(){
  gulp.watch('./*.scss',['sass']);
});

Gulp - Pug - BrowserSync

Instalando pug en gulp 
En esta oportunidad estaremos trabajando con un pluggin de gulp, llamado gulp-pug el cual nos permitira compilar un archivo pug a un archivo html.
tambien usaremos browserSync para ver los cambios en tiempo real.



Requisitos previos:
1 tener instalado node.js
2 tener instalado gulp global y localmente (package.json - pugfile.js)
3 Instalar pug (plugin de pug para gulp)
npm install gulp-pug --save-dev
4 configurar el archivo pugfile.js, agregando el pug

const gulp = require('gulp');
const pug = require('gulp-pug');
const browserSync = require('browser-sync');

gulp.task('html',function(){
  gulp.src('./*.pug')
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('./app/'))
});

gulp.task('pughtml', function(){
  gulp.watch('./*.pug', ['html']);
})

gulp.task('default', ()=>{
  browserSync.init({
    server: './app'
  });
gulp.watch('./*.pug', ['html']);
gulp.watch('./app/*.html').on('change', browserSync.reload);
});