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

Bower+Gulp: Minify all CSS into one file

我是Bower的新手，我想使用Gulp处理CSS

我终于明白了！

gulp-clean-css是绝对出色的插件，可以处理所有这些问题(@import和相对路径)。只需在文件中使用first clean-css和THEN concat样式即可(我相反)。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// 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: {
\t'bootstrap': {main: [
\t\t'dist/js/bootstrap.js',
\t\t'dist/css/bootstrap.css',
\t\t'dist/css/bootstrap-theme.css',
\t]},
\t'jquery-ui': {main: [
\t\t'jquery-ui.js',
\t\t'themes/base/all.css',
\t]},
}};

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

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

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