gulp-extract-media-query

Gulp plugin, which extracts media queries into separate files.

HOW TO USE

var gulp = require('gulp');
var extractMediaQuery = require('gulp-extract-media-query');

gulp.task('css', function() {
  gulp.src('src/style.css')
    .pipe(extractMediaQuery({
      match: '(min-width: 768px)',
      postfix: '-768'
    }))
    .pipe(gulp.dest('build'));
});

Source CSS sample

h1 {
  font-size: 30px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 20px;
  }
}

Result CSS files

style.css	style-768.css
h1 { font-size: 30px; }	h1 { font-size: 20px; }

You can include them in your html:

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style-768.css" media="(min-width: 768px)" />