How to combine only the necessary css files into one file?

Question

css

To automate the build of the frontend, I use Gulp.JS.
For layout I use SSS:

1. Swig (to move the layout to a separate document),
   
2. Stylus (CSS preprocessor),
   
3. Spritesmith (collecting icons from the icons folder into one icons.png file).
   

Now I want to merge the styles used on the page into one file.
Now my document looks like this:

<!-- index.html -->
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

And I want to do this:

<!-- index.html -->
<link rel="stylesheet" type="text/css" href="css/index.css">

That is, combine all three files into one.
Recommend a package for Gulp.JS that will help reduce the number of style requests.
For each page, an individual set of files with styles. For each document, I want to get a separate css file.

Answer 1

https://github.com/scniro/gulp-clean-css