gulp 按要求顺序合并生成的 sass 事件流的任务不起作用
gulp task to merge generated sass event stream as required order is not working
我有三个 bootstrap sass 和另外两个 sass 文件,我正在将它们编译并合并为一个 css。在 bootstrap 我是 运行 "uncss" 来摆脱未使用的 css 但是对于其他人我不是 运行 "uncss" 因为我没有想。为了合并这些,我使用 "eventstream"。不幸的是,生成的组合 css 文件的顺序不符合我的要求。无论如何,bootstrap css 文件总是在最后打印,这是导致问题的原因。以下是我的 gulp 任务
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
我想将 bootstrap 保持在顶部,以便我的自定义 bootstrap 代码可以正常工作。
请帮忙。
你可以这样写自定义比较器
// sort with a custom comparator
gulp.src('./src/js/**/*.js')
.pipe(sort({
comparator: function(file1, file2) {
if (file1.path.indexOf('build') > -1) {
return 1;
}
if (file2.path.indexOf('build') > -1) {
return -1;
}
return 0;
}
}))
.pipe(gulp.dest('./build/js'));
了解更多信息 here
我有三个 bootstrap sass 和另外两个 sass 文件,我正在将它们编译并合并为一个 css。在 bootstrap 我是 运行 "uncss" 来摆脱未使用的 css 但是对于其他人我不是 运行 "uncss" 因为我没有想。为了合并这些,我使用 "eventstream"。不幸的是,生成的组合 css 文件的顺序不符合我的要求。无论如何,bootstrap css 文件总是在最后打印,这是导致问题的原因。以下是我的 gulp 任务
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
我想将 bootstrap 保持在顶部,以便我的自定义 bootstrap 代码可以正常工作。
请帮忙。
你可以这样写自定义比较器
// sort with a custom comparator
gulp.src('./src/js/**/*.js')
.pipe(sort({
comparator: function(file1, file2) {
if (file1.path.indexOf('build') > -1) {
return 1;
}
if (file2.path.indexOf('build') > -1) {
return -1;
}
return 0;
}
}))
.pipe(gulp.dest('./build/js'));
了解更多信息 here