我使用gulp-useref
来连接和缩小我的脚本资产。由于我的项目包含一些bootstrap
样式,我想修剪它的所有不必要的部分。为此我已经集成了gulp-purifycss
插件。我现在尝试使用gulp-useref
的{{1}}功能来选择性地仅净化transformStream
,这会导致我的缩小的javascript和CSS的输出文件无效。例如,生成的javascript文件也包含所有bootstrap.css
,CSS文件只包含我自己的CSS的两行。
这是我的gulp任务:
bootstrap.css
可能我以错误的方式使用var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var htmlminOpts = {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
minifyJS: true,
minifyCSS: true
};
var cssminOpts = {
keepSpecialComments: 0
};
// ...
gulp.task('scripts:public', function() {
return gulp.src('client/public/index.html')
.pipe($.useref({
searchPath: ['client/public', './']
}, require('lazypipe')().pipe($.if, function(file) {
return file.path.indexOf('bootstrap.css') > -1;
}, $.purifycss(['client/public/**/*.html']))))
.pipe($.if('**/bower_components/**/*.js', $.fixmyjs()))
.pipe($.if('*.js', $.uglify().on('error', $.util.log)))
.pipe($.if('*.html', $.htmlmin(htmlminOpts)))
.pipe($.if('*.css', $.cssmin(cssminOpts)))
.pipe(gulp.dest('../dist/client/public'));
});
,但是文档在这方面非常微薄,因为它只告诉我
transformStream
,这将是我想要的:在Transform assets before concat.
之前通过bootstrap.css
转换,然后再与我自己的CSS连接。
提前感谢您提供正确方向的任何提示!