将多个 css 文件缩小为一个文件的最佳方法是什么?
下面的 gulp 任务在缩小和连接后导致了两个问题:
- 我使用的 bootstraps 字形图标消失了。
- 我的一些风格被打破了。该任务似乎重新安排了某些样式的位置,例如
.footer{...}
被放置在html{...} 下方
但它现在位于html{...}
之上。我怎样才能阻止它重新排列它们?
gulp 文件:
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'));
});
有什么想法吗?
最佳答案
我不知道它是否对您有帮助,但我认为您可以通过 gulp-sass 使用 SASS 预处理。在那里你可以导入所有依赖项并让 gulp-sass 缩小结果。我在我的 gulp devstack 中有类似的方法。 SASS (libsass) 可以导入 *.css 文件,例如在你的 main.scss 你可以写
@import "path/to/file";
请注意,没有 .css 扩展名! 如果您不熟悉 SASS,我建议您试一试。
关于css - Gulp - 将多个 css 文件缩小为一个文件的最佳方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40006898/