martes, 26 de febrero de 2019

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);
});

No hay comentarios.:

Publicar un comentario

Repasando TypeScript

Repasando de forma rápida la sintaxis básica de TypeScript. //----------  tipo de datos var myString: string ="hello world"; m...