martes, 26 de febrero de 2019

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


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...