Gulp - gulp-stylus + gulp-concat = love?

Question

css

Good day to all!
There is a small question to which I cannot "give mind". Organized the stylus -> css transformation task:

// STYLUS TASK
gulp.task('stylustask', function() {
  return gulp.src('app/stylus/*.styl')
    .pipe(plumber())
    .pipe(stylus({use:[nib(),jeet(),rupture()]}))
    .pipe(prefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(csscomb())
    .pipe(notify("Stylus ready!"))
    .pipe(gulp.dest('build/css/'));
});

Everything is working. But I want to "decorate" the process even more with a small subtask .
Often, when connecting any sliders / carousels (slick, owl caroussel), there are accompanying CSS tables necessary for the correct operation of these sliders / carousels.
CSS tables are already ready - all that remains is to connect them. Now my process in this regard looks sloppy. CSS tables for fontawesome, owl caroussel are included in separate files in head; at the end, the compiled main CSS table is included:

...
  link(rel="stylesheet" href="css/font-awesome.css")
  link(rel="stylesheet", href="css/owl.carousel.css")
  link(rel="stylesheet", href="css/slick.css")
  link(rel="stylesheet", href="css/slick-theme.css")
  link(rel="stylesheet" href="css/style.css")
  link(rel="shortcut icon", type="image/x-icon", href="favicon.ico")

I would like to "wedge" in the gulp-stylus task shown above another one - gulp-concat. Thus - gulp-concat "picks up" the gulp-stylus compiled by the task (after .pipe(stylus({use:[nib(),jeet(),rupture()]}))) main CSS file. Then it "selects" from a third-party directory (say - resources) ready-made CSS tables for fontawesome, owl caroussel, slick and so on. The whole thing is combined into one common CSS file. Next - prefixer, csscomb and other delights.
As a result, one CSS file in the head instead of the current "bundle". How to "tell" gulp-concat to pick up more CSS files from the specified directory along the way?

Answer 1

Do not fence too complex tasks, it is not easier for the system to perform. than you then support. I advise you to go the way that many have already taken: 1) create a task for transferring styl to css with the output of one file in the build directory 2) create a task with concatenation of all third-party css also in the build directory 3) on the third task, hang the concatenation of all css from the build directory and you already do all the operations with them, minification, auto-prefixes, etc. To ensure that the first two tasks are completed before the third task is completed, the third task can be described as

gulp.task('task3', ['task1', 'task2'], function() {
  // Код третьей задачи
});

Answer 2

I use less and that's why I just import css into main.less, sass/stylus can't do that, so there's a good option to build sass/stylus -> css first and then use merge-stream to add a stream with external css (I take it via main-bower-files) and run everything through the concatenation. No temporary files, everything is in memory and easy to maintain. Actually, on projects with ionic, I usually do this.

Answer 3

Just set the option for stylus
'include css': true
And include your css in stylus files with import