Question

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

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

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

minify CSS的My Gulp任务如下所示：

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：

＆＃13;

// 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']);

＆＃13;

Bower + Gulp：将所有CSS缩小为一个文件

1 个答案: