吞咽-将多个css文件缩小为一个的最佳方法？

Question

将多个css文件缩小为一个文件的最佳方法是什么？

下面的gulp任务在缩小和串联后引起两个问题：

1. 我使用的引导符号已经消失了。
2. 我的一些风格被打破了。任务似乎让重新安排了--一些样式的位置，例如.footer{...}放在html{...}下面，但现在放在html{...}之上。我怎么才能阻止他们重新安排呢？

吞咽文件：

gulp.task('minify-css', function() {
    return gulp.src([
        'node_modules/bootstrap/dist/css/bootstrap.css',
        'vendor/jquery-ui-1.12.1/jquery-ui.min.css',
        'node_modules/bootstrap/dist/css/bootstrap-theme.css',
        'node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.css',
        'css/style.css',
        ])
        .pipe(sourcemaps.init())
        .pipe(cleanCSS({debug: true}))
        .pipe(sourcemaps.write())
        .pipe(concat('bundle.min.css'))
        .pipe(gulp.dest('dist'));
});

有什么想法吗？

Answer 1

我不知道这是否对你有帮助，但我想你可以用SASS预处理。在那里，您可以导入所有的依赖项，并让吞咽-sass来缩小结果。我的吞咽系统中也有类似的方法。SASS (libsass)可以导入*.css文件，例如在main.scss中可以编写

@import "path/to/file";

请注意，没有.css扩展！如果你不熟悉SASS，我建议给它一个机会。

Answer 2

这不是一个常见的解决方案，但有时会有所帮助。我有两分钟的时间。捆绑：'head.bundle.min.css‘和'foot.bundle.min.css’就像你一样。在head.bundle.min.css中，我收集的样式必须是第一位的。最后，我把两分钟捆绑在一起。