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