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

sage
1

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.

1 Like
2

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?

3

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.

4

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
5

Thank you. I really appreciate it.