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

**URL:** https://discourse.roots.io/t/how-to-add-css-shrink-and-combine-media-query-to-gulpfile-js-to-affect-main-css/6752
**Category:** sage
**Tags:** gulp
**Created:** 2016-05-16T17:49:14Z
**Posts:** 5

## Post 1 by @yaharga — 2016-05-16T17:49:15Z

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() {
> gulp.src('css/**/*.css')
> .pipe(cssshrink())
> .pipe(gulp.dest('dist/css/'));
> });
> ```

- Combine Media Queries

> ```
> var cmq = require('gulp-combine-media-queries');
>  
> gulp.task('cmq', function () {
> gulp.src('src/**/*.css')
> .pipe(cmq({
> log: true
> }))
> .pipe(gulp.dest('dist'));
> });
> ```

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(dep.name);
> if (!enabled.failStyleTask) {
> cssTasksInstance.on('error', function(err) {
> console.error(err.message);
> this.emit('end');
> });
> }
> merged.add(gulp.src(dep.globs, {base: 'styles'})
> .pipe(cssTasksInstance));
> });
> gulp.src(path.dist + 'styles/main.css')
> .pipe(cssshrink())
> .pipe(cmq())
> .pipe(gulp.dest(path.dist + 'styles/main.css'));
> return merged
> .pipe(writeToManifest('styles'));
> });
> ```

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.

---

## Post 2 by @squaredindex — 2016-06-09T15:38:42Z

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?

---

## Post 3 by @yaharga — 2016-06-15T15:28:09Z

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.

---

## Post 4 by @squaredindex — 2016-06-16T18:49:12Z

Ah I see. I generally add UnCSS to most projects I do via the gulp file, there’s a post on that [here](https://discourse.roots.io/t/sage-uncss/5015) you might find useful.

---

## Post 5 by @yaharga — 2016-06-16T19:07:39Z

Thank you. I really appreciate it.