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

Question

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

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

CSS 文件未被 gulp-main-bower-files 插件找到。例如 CSS 样式 jQuery UI。由 gulp-add-src 插件解决。
最小化样式，包括 @import 命令。由 gulp-cssimport 插件解决。
图片路径在CSS文件中。 把所有CSS都最小化成一个样式，不知道怎么解决。当我使用相对路径（例如 background: url('../images/bg1.jpg')）最小化 CSS 时，最小化文件的位置与原始文件不同，因此路径不起作用。
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 然后将样式连接到一个文件中 （我做的相反）。

如果有人感兴趣，我附上我的全部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']);

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

Bower+Gulp: Minify all CSS into one file

bower

gulp