我有三个引导 sass 和另外两个 sass 文件,我正在编译并合并到一个 css 中。在引导程序上,我正在运行“uncss”以摆脱未使用的 css,但是对于其他人,我没有运行“uncss”,因为我不想要。为了合并这些,我使用“eventstream”。不幸的是,生成的组合 css 文件的顺序不符合我的要求。无论如何,引导 css 文件总是在最后打印,这会导致问题。以下是我的吞咽任务
var eventStream = require('event-stream'),
sass = require('gulp-sass'),
uncss = require('gulp-uncss'),
csso = require('gulp-csso'),
concat = require('gulp-concat');
gulp.task('sass', function () {
//Copy bootstrap fonts files
gulp.src(config.sassPath + '/vendor/bootstrap-sass-3.3.2/assets/fonts/**/*')
.pipe(gulp.dest(config.cssPath + '/fonts'));
//compile bootstrap css, compress and remove unused css rules
var bootstrapCss = gulp.src(config.sassPath + '/vendor/custom/custom-bootstrap.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(uncss({
html: ['./application/public/templates/**/*.html']
}))
.pipe(csso());
//Compile slick css file to compress it
var slickCss = gulp.src(config.sassPath + '/vendor/slick/slick.scss')
.pipe(sass({outputStyle: 'compressed'}));
//Compile mysite css file and compress it
var mysiteCss = gulp.src(config.sassPath + '/application/my-site.scss')
.pipe(sass({outputStyle: 'compressed'}));
//merge all css
eventStream.merge(slickCss, mysiteCss, bootstrapCss)
.pipe(concat('my-final-site.css'))
.pipe(gulp.dest(config.cssPath + '/stylesheets'));
});
在最终生成的 my-final-site.css 中,css 按以下顺序打印
1. slick
2. my-site
3. bootstrap
我想将引导程序保持在顶部,以便我自定义的引导程序代码可以正常工作。
请帮忙。