How to add CSS Shrink and Combine Media Query to gulpfile.js to Affect main.css?

I’m very new to gulp and seeing as how complex the Roots gulpfile is, I’m so lost as to which block of code I should put in my code in.

The usage examples for both packages is as follows:

  • CSS Shrink
var gulp = require('gulp');
var cssshrink = require('gulp-cssshrink');
gulp.task('default', function() {
  • Combine Media Queries
var cmq = require('gulp-combine-media-queries');
gulp.task('cmq', function () {
      log: true

I tried to put it in the Styles task, but nothing happens:

gulp.task('styles', ['wiredep'], function() {
  var merged = merge();
  manifest.forEachDependency('css', function(dep) {
    var cssTasksInstance = cssTasks(;
    if (!enabled.failStyleTask) {
      cssTasksInstance.on('error', function(err) {
    merged.add(gulp.src(dep.globs, {base: 'styles'})
  gulp.src(path.dist + 'styles/main.css')
      .pipe(gulp.dest(path.dist + 'styles/main.css'));
  return merged

Ideally, I would need to capture the main.css code and implement the cmq and cssshrink to it just before it is finally exported into the distribution folder.

1 Like

Hey, I know this is a late reply, but did you have any luck with integrating these in the end? Or did you try and other ways of adding them?

I gave up and removed them. I think something in the Sage gulp file already does these things. I just wanted to improve the code more. Would still be interested in knowing how to add gulp packages in to affect main.css.

Ah I see. I generally add UnCSS to most projects I do via the gulp file, there’s a post on that here you might find useful.

1 Like

Thank you. I really appreciate it.