Gulp - 将多个 css 文件压缩为一个的最佳方法？答案

【问题标题】：Gulp - the best way of minifying multiple css files into one?Gulp - 将多个 css 文件压缩为一个的最佳方法？
【发布时间】：2016-10-12 19:33:17
【问题描述】：

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

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

我使用的引导字形图标消失了。
我的一些样式坏了。该任务似乎重新安排了某些样式的位置，例如.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'));
});

有什么想法吗？

【问题讨论】：

标签： css twitter-bootstrap gulp gulp-concat gulp-clean-css

【解决方案1】：

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

@import "path/to/file";

请注意，没有 .css 扩展名！如果您不熟悉 SASS，我建议您尝试一下。

【讨论】：

【解决方案2】：

这不是一个常见的解决方案，但有时它会有所帮助。我做两分钟。 bundles: 'head.bundle.min.css' 和 'foot.bundle.min.css' 就像你做的那样。在 head.bundle.min.css 中，我收集了必须是第一个的样式。最后，我将两个最小捆绑包合并为一个。

【讨论】：