Gulp -将多个css文件缩小到一个的最佳方式

Question

将多个css文件压缩成一个的最佳方法是什么?

下面的gulp任务在缩小和连接之后会导致两个问题:

1. 我使用的bootstrap象形符号已经消失了。
2. 我的一些样式是坏的。任务似乎有重新安排了一些样式的位置，例如.footer{...}被放在html{...}下面，但现在它在html{...}上面。我怎样才能阻止它重新排列它们呢?

gulpfile:

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

我不知道它是否对你有帮助，但我认为你可以使用gulp-sass预处理。在那里，您可以导入所有依赖项，并让gulp-sass最小化结果。我在gulp devstack中也采用了类似的方法。SASS (libsass)可以导入*.css文件，例如在你的main。SCSS你可以写

@import "path/to/file";

注意，没有。css扩展名!如果你不熟悉SASS，我建议你试一试。

Answer 2

这不是一个常见的解决方案，但有时它会有所帮助。我创建了两个min. bundle: 'head.bundle.min.css'和'foot.bundle.min.css'，就像你做的那样。在head.bundle.min.css中，我收集了必须放在首位的样式。最后，我把两个最小包连接在一起。