Gulpjs separating css by media query

extract-media-query.js

'use strict';

// Required packages.
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    del = require('del'),
    minifyCss = require('gulp-clean-css'),
    renameFile = require('gulp-rename'),
    mediaQueriesSplitter = require('gulp-media-queries-splitter');

// Set Source File directories. Should be modified based on setup.
var src = {
  scss: '../scss/**/*.scss',
  css: '../css/**/*.css',
  deleteBuild: '../css/build/**/*'
}

// Set Destination File directories. Should be modified based on setup.
var dest = {
  css: '../css/build',
  excludeBuild: '!../css/build',
}

// Remove build folder so it doesn't split twice.
function removeBuild() {
  return del([src.deleteBuild], { force: true });
}
// Function for minifying scss.
function extractMediaQuery() {
  return gulp.src([src.css, dest.excludeBuild])
    .pipe(mediaQueriesSplitter([
      {media: 'none', filename: 'mobile-small.css'},
      {media: {min: '480px', minUntil: '767px'}, filename: 'mobile.css'},
      {media: {min: '768px', minUntil: '1023px'}, filename: 'tablet-small.css'},
      {media: {min: '1024px', minUntil: '1439px'}, filename: 'tablet.css'},
      {media: {min: '1440px', minUntil: '1679px'}, filename: 'desktop-small.css'},
      {media: {min: '1680px'}, filename: 'desktop.css'}
    ]))
    .pipe(minifyCss())
    .pipe(renameFile({
      suffix: '.min'
    }))
    .pipe(gulp.dest(dest.css));
}

// Gulp task.
gulp.task('extract-media-query', gulp.series(removeBuild,extractMediaQuery), function(done) {
  console.log('Finished extract-media-query task.');

  // set done signal.
  done();
});