Gulp：使用纯 CSS 编译 Stylus 和 concat答案

【问题标题】：Gulp: Compile Stylus and concat with pure CSSGulp：使用纯 CSS 编译 Stylus 和 concat
【发布时间】：2014-11-05 12:02:36
【问题描述】：

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

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

【问题讨论】：

标签： css gulp stylus

【解决方案1】：

您应该能够创建两个单独的文件流并将它们与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'));
});

【讨论】：

当您需要连接大量遗留的 css 样式表并且简单地使用 @require legacy/* 不起作用时，这是最好的解决方案，因为 globbing 导入仅适用于 .styl源文件。

【解决方案2】：

您可以使用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'));
});

【讨论】：

【解决方案3】：

在您的 Stylus 文件中，您可以只使用@require CSS 文件：

@require 'something.css'

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

【讨论】：

应该遵循这个。在某些情况下，我们可能需要上述解决方案。
你能稍微扩展一下吗？我不清楚这如何解决问题...？ stackoverflow.com/users/223225/geoffrey-booth
如果最终结果是一个包含源 .css 和 .styl 文件的 CSS 文件，您可以使用您的 Stylus 文件同时包含这两个文件。这样就只有一个构建路径：编译 Stylus，而无需稍后连接/合并文件。

【解决方案4】：

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

【讨论】：