gulp-extract-media-queries2

Plugin extracts css rules inside of media queries and saves it to separated files.

EXAMPLE

var gulp = require("gulp");
var extractMedia = require('gulp-extract-media-queries');

gulp.task("design.build", function() {
	gulp.src("src/design/style.css")
		.pipe(extractMedia())
		.pipe(gulp.dest("build"));
});

Task design.build for below style.css file:

* {
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.container {
		margin: 0 auto;
	}
}

Produces following files:

style.css	style-min-width-640px.css
* { box-sizing: border-box; }	.container { margin: 0 auto; }

OR

gulp.task("design.build", function() {
	gulp.src("src/design/style.css")
		.pipe(extractMedia((fileName, mediaName) => { // filter specific medias
			return mediaName.indexOf("min-width-768") > -1
		}))
		// may you can do something like 
		// .pipe(concat('media-ie-8.css'))
		.pipe(gulp.dest("build"));
});

Task design.build for below style.css file:

* {
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.container {
		margin: 0 auto;
	}
}
@media (min-width: 768px) {
	.container {
		margin: 0 20px;
	}
}

Produces following files:

style.css	style-min-width-640px.css	style-min-width-768px.css
* { box-sizing: border-box; }	you will not get this file	.container { margin: 0 20px; }

And now you can include it in your html in such way:

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

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their tags will still download even if their media queries would return false (they will not apply, however).

Unless you use the not or only operators, the media type is optional and the all type will be implied.