1.0.3 • Published 5 years ago
gulp-split-media-queries v1.0.3
gulp-split-media-queries
This plugin splits all media queries above defined breakpoint into separated file.
ADD THIS PACKAGE
yarn add -D gulp-split-media-queries
USAGE
const gulp = require('gulp');
const splitMediaQueries = require('gulp-split-media-queries');
gulp.task('build', function() {
gulp.src('assets/styles/all.css')
.pipe(splitMediaQueries({
breakpoint: 1024, // default is 768
}))
.pipe(gulp.dest('build'));
});
all.css
file:
.container {
padding: 20px;
}
@media (min-width: 768px) {
.container {
padding: 10px 20px;
}
}
@media (min-width: 1024px) {
.container {
padding: 30px;
}
}
@media (min-width: 1280px) {
.container {
margin: 20px 0;
}
}
This will be output:
Include it in HTML:
<link rel="stylesheet" type="text/css" href="all.css" />
<link rel="stylesheet" type="text/css" href="all-above-1024.css" media="(min-width: 1024px)" />
Thanks for inspiration: https://www.npmjs.com/package/gulp-extract-media-queries