Mi «gulpfile.js» para maquetar (sass + autoprefixer + browser-sync)

Me lo ha pedido un usuario, y por si alguien más le puede ser de utilidad aquí os dejo el «gulpfile.js» básico que suelo usar solo para maquetar css en mis proyectos.

Uso principalmente estos plugins de gulp:

• sass: todos lo conocéis…
• autoprefixer: para agregar los vendor automáticamente.
• browser-sync: para sincronizar el navegador a cada cambio de css.

var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create();

var input = './app/sass/**/*.scss';
var output = './app/css/';

// BROWSER-SYNC

gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: 'http://localhost/directorio-de-mi-web/'
  });
});

// SASS

gulp.task('sass', function () {
  gulp.src(input)
    .pipe(sass({
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'android 4'],
      cascade: false
    }))
    .pipe(gulp.dest(output))
    .pipe(browserSync.stream());
});

// WATCH

gulp.task('default', ['browser-sync', 'sass'], function () {
  gulp.watch(input, ['sass']);
});