Bower+Gulp：将所有 CSS 压缩到一个文件中

Question

我是 Bower 的新手，我想使用 Gulp 来处理 CSS 和 JS 加载和缩小。

我已经解决了（我希望）JS 缩小问题。但是使用 CSS 我发现了几个问题，并不是所有的问题我都能解决：

1. gulp-main-bower-files 插件找不到的 CSS 文件。例如 jQuery UI 的 CSS 样式。由gulp-add-src 插件解决。
2. 最小化样式，包括@import 命令。由gulp-cssimport 插件解决。
3. CSS 文件中的图像路径。 当我将所有 CSS 最小化为一种样式时，不知道如何解决。当我使用相对路径（例如 background: url('../images/bg1.jpg')）最小化 CSS 时，最小化文件的位置与原始文件不同，因此路径不起作用。
4. CSS文件中的字体路径。也不知道怎么解决。这是和上面一样的问题。例如下面 Gulp 任务的结果，我无法使用 Bootstrap 图标。

我的 Gulp 缩小 CSS 任务如下所示：

var mainBowerFiles = require('gulp-main-bower-files');
var addsrc = require('gulp-add-src');
var concat = require('gulp-concat');
var filter = require('gulp-filter');
var cssimport = require('gulp-cssimport');
var cleanCSS = require('gulp-clean-css');

var src = 'www/bower_components/';
var dest = 'www/bower_components/_compiled/';

gulp.task('css', function() {
	gulp.src('./bower.json')
		.pipe(mainBowerFiles())
		.pipe(filter('**/*.css'))
		.pipe(addsrc(src+'jquery-ui/themes/base/all.css')).pipe(cssimport())
		.pipe(addsrc(src+'bootstrap/dist/css/bootstrap.css')).pipe(cssimport())
		.pipe(addsrc(src+'bootstrap/dist/css/bootstrap-theme.css')).pipe(cssimport())
		.pipe(concat('all.min.css'))
		.pipe(cleanCSS())
		.pipe(gulp.dest(dest));
});

感谢您的帮助。

Answer 1

我终于明白了！

gulp-clean-css 是绝对出色的插件，可以处理所有这些（@import 和 相对路径）。 将第一个 clean-css 和 THEN concat 样式合并到一个文件中是必要的（我做了相反的事情）。

如果有人感兴趣，我附上我的整个gulpfile.js：

// Include Gulp & plugins
var gulp           = require('gulp');
var mainBowerFiles = require('gulp-main-bower-files');
var addSrc         = require('gulp-add-src');  // .pipe(addSrc('www/bower_files/foo.js'))
var order          = require('gulp-order');
var concat         = require('gulp-concat');
var filter         = require('gulp-filter');
var uglify         = require('gulp-uglify');
var cleanCSS       = require('gulp-clean-css');

// Settings
var dest = 'www/bower_components/';

var bowerOptions = {overrides: {
	'bootstrap': {main: [
		'dist/js/bootstrap.js',
		'dist/css/bootstrap.css',
		'dist/css/bootstrap-theme.css',
	]},
	'jquery-ui': {main: [
		'jquery-ui.js',
		'themes/base/all.css',
	]},
}};


// Tasks
gulp.task('css', function() {
	gulp.src('./bower.json')
		.pipe(mainBowerFiles(bowerOptions))
		.pipe(filter('**/*.css'))
		.pipe(cleanCSS({rebaseTo: dest}))
		.pipe(concat('all.min.css'))
		.pipe(gulp.dest(dest));
});

gulp.task('js', function() {
	gulp.src('./bower.json')
		.pipe(mainBowerFiles(bowerOptions))
		.pipe(filter('**/*.js'))
		.pipe(order([
			'**/jquery/dist/jquery.js',
			'**/nette.ajax.js',
			'**/*',
		]))
		.pipe(uglify())
		.pipe(concat('all.min.js'))
		.pipe(gulp.dest(dest));
});

gulp.task('default', ['js', 'css']);