Gulpfile con sourcemaps, autoprefixer y media queries sort para Sass

[email protected]

//Funciona con gulp 3.9.1 y solo hasta node@10	
//npm init -y	
//npm i -D [email protected] gulp-sourcemaps gulp-sass gulp-postcss autoprefixer css-mqpacker sort-css-media-queries browser-sync

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const sortCSSmq = require('sort-css-media-queries');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');

// Static Server + watching scss/html files
gulp.task('serve', function () {
  browserSync.init({
    server: './html'
  });
  gulp.watch('html/assets/sass/**/*.scss', ['sass']);
  gulp.watch('html/*.html').on('change', browserSync.reload);
  gulp.watch('html/assets/js/*.js').on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function () {
  var postCSSplugins = [
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('css-mqpacker')({
      sort: sortCSSmq
    })
  ];
  return gulp.src('html/assets/sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(postcss(postCSSplugins))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('html/assets/css'))
    .pipe(browserSync.stream());
});

gulp.task('default', ['sass', 'serve']);