Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

I wrote my first Gulp plugin, a light wrapper for our node-combine-mq task.

IMPORTANT: This plugin is no longer in active development. There are a few alternatives out there, but I’ve not tested them out yet.

Innovation Day

Once a month at Building Blocks we have an Innovation Day. On these days we have the opportunity to work on fun internal projects, open source projects or generally just read up on the latest tech and improve our skillset and knowledge.

The last two innovation days me and the Spacedawwwg have been working on rewriting BB's Grunt plugin to combine media queries, porting the features to a Node package and wrapping them in a light Grunt task (as it should be!).

I ended up taking our innovation day project a step further and created a simple Gulp wrapper for the task.

Gulp Combine MQ

Now bare in mind that I’d only first played with Gulp the day before I wrote this plugin but it works quite nicely - even though it currently needs a little affection.

Installation

Simply install and save as you would any Node package:

npm install --save-dev gulp-combine-mq

Usage

And add the following to your gulpfile.js:

var combineMq = require('gulp-combine-mq');

    gulp.src('./src/**/*.css')
      .pipe(combineMq())
      .pipe(gulp.dest('./dist'));

TL;DR

Gulp-combine-mq is a light Gulp wrapper for our Node combine media queries task. It is useful for CSS generated by preprocessors using nested media queries.

Currently it has been downloaded over 100 times and I personally use it in a couple of projects.

gulp-combine-mq’s stats on NPM

IMPORTANT: The gulp-combine-mq plugin is no longer in active development. There are a few alternatives out there, but I’ve not tested them out yet.