Question

我在'./styles/stylus/**.styl'中有一堆Stylus文件，在'./styles/css/**.css'中有一堆CSS文件。

如何使用Gulp编译Stylus文件，将结果与所有CSS文件连接起来并输出到'./styles/out.css'？

Answer 1

您可以使用gulp-filter之类的：

var gulp   = require('gulp');
var stylus = require('gulp-stylus');
var concat = require('gulp-concat');
var Filter = require('gulp-filter');

gulp.task('css', function () {

    var filter = Filter('**/*.styl', { restore: true });

    return gulp.src([
            './styles/stylus/**.styl',
            './styles/css/**.css'
        ])
        .pipe(filter)
        .pipe(stylus())
        .pipe(filter.restore)
        .pipe(concat('out.css'))
        .pipe(gulp.dest('./styles'));
});

Answer 2

您应该能够创建两个单独的文件流，并将它们与event-stream合并：

var es = require('event-stream');

gulp.task('styles', function() {
  var stylusStream = gulp.src('./styles/stylus/**.styl')
    .pipe(stylus());

  return es.merge(stylusStream, gulp.src('./styles/css/**.css'))
    .pipe(concat('out.css'))
    .pipe(gulp.dest('./styles'));
});

Answer 3

在您的Stylus文件中，您只能@require CSS文件：

@require 'something.css'

然后在Gulp中不需要连接或任何其他复杂性，并且您的文件加载顺序在.styl文件中明确设置。

Answer 4

我刚刚找到了一个很好的解决方案：对main.styl文件中的每个其他.styl文件使用@require，然后只看gulp.src（'src / css / main.styl'）

Gulp：使用纯CSS编译Stylus和concat

4 个答案: