How to combine home page styles into one css file?

Question

css

It is necessary to collect styles for the visible area that the user sees at the entrance. Roughly speaking the first 1000px.
I heard that gulp can do it. But I don't know how to do it. Maybe someone in the know?

Answer 1

fourword.fourkitchens.com/article/use-gulp-automat...

var critical = require('critical');

gulp.task('critical', function (cb) {
  critical.generate({
    base: '_site/',
    src: 'index.html',
    css: ['css/all.min.css'],
    dimensions: [{
      width: 320,
      height: 480
    },{
      width: 768,
      height: 1024
    },{
      width: 1280,
      height: 960
    }],
    dest: '../_includes/critical.css',
    minify: true,
    extract: false,
    ignore: ['font-face']
  });
});

And alternative
https://github.com/ben-eb/gulp-uncss

var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function() {
    gulp.src('site.css')
        .pipe(uncss({
            html: ['index.html', 'about.html']
        }))
        .pipe(gulp.dest('./out'));
});