Gulp结合凉亭文件


Gulp to combine bower files

我知道这可能是以前问过的问题，但我似乎无法向谷歌提出正确的问题来找到我需要的东西。所以我可能想错了。

基本上，我需要知道是否有一种方法可以将gulp与bower一起使用，以便bower_components下的所有子目录中的css文件合并为一个styles.css，bower_components下的所有子目录中的js文件合并为一个scripts.js。assetic在symfony2中的工作方式，将资产合并为单个文件。每个bower_componets子目录中的每个"build"文件都必须手动链接到(在gulp配置文件中)，还是更常见的方法是通过编程循环？

谢谢

相关讨论

有一种方法，它真的很简单。您可以将"gulp run"安装到您的NPM devdependencies，然后使用run执行bower安装。

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
var gulp = require('gulp'),
    del = require('del'),
    run = require('gulp-run'),
    sass = require('gulp-sass'),
    cssmin = require('gulp-minify-css'),
    browserify = require('browserify'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    browserSync = require('browser-sync'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    reactify = require('reactify'),
    package = require('./package.json'),
    reload = browserSync.reload;

/**
 * Running Bower
 */
gulp.task('bower', function() {
  run('bower install').exec();
})

/**
 * Cleaning lib/ folder
 */
.task('clean', function(cb) {
  del(['lib/**'], cb);
})

/**
 * Running livereload server
 */
.task('server', function() {
  browserSync({
    server: {
     baseDir: './'
    }
  });
})

/**
 * sass compilation
 */
.task('sass', function() {
  return gulp.src(package.paths.sass)
  .pipe(sass())
  .pipe(concat(package.dest.style))
  .pipe(gulp.dest(package.dest.lib));
})
.task('sass:min', function() {
  return gulp.src(package.paths.sass)
  .pipe(sass())
  .pipe(concat(package.dest.style))
  .pipe(cssmin())
  .pipe(gulp.dest(package.dest.lib));
})

/**
 * JSLint/JSHint validation
 */
.task('lint', function() {
  return gulp.src(package.paths.js)
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
})

/** JavaScript compilation */
.task('js', function() {
  return browserify(package.paths.app)
  .transform(reactify)
  .bundle()
  .pipe(source(package.dest.app))
  .pipe(gulp.dest(package.dest.lib));
})
.task('js:min', function() {
  return browserify(package.paths.app)
  .transform(reactify)
  .bundle()
  .pipe(source(package.dest.app))
  .pipe(buffer())
  .pipe(uglify())
  .pipe(gulp.dest(package.dest.lib));
})

/**
 * Compiling resources and serving application
 */
.task('serve', ['bower', 'clean', 'lint', 'sass', 'js', 'server'], function() {
  return gulp.watch([
    package.paths.js, package.paths.jsx, package.paths.html, package.paths.sass
  ], [
   'lint', 'sass', 'js', browserSync.reload
  ]);
})
.task('serve:minified', ['bower', 'clean', 'lint', 'sass:min', 'js:min', 'server'], function() {
  return gulp.watch([
    package.paths.js, package.paths.jsx, package.paths.html, package.paths.sass
  ], [
   'lint', 'sass:min', 'js:min', browserSync.reload
  ]);
});

号

我刚刚发布的这个安装程序真正漂亮的地方是，它正在进行一个名为"服务"的自定义Gulp运行，它将使用开发服务器运行您的安装程序(使用实时重新加载和更好的错误智能)，您所要做的就是转到您的目录并键入"Gulp-Service"，它将运行Bower安装并为您构建所有内容。显然，文件夹结构是不同的，所以您需要做一些修改，但希望这显示了如何用gulp运行bower:。

需要下面的帮助吗？它循环遍历"src"目录中的所有css文件，并在"dist"文件夹中输出一个css文件。对我的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
// Config
var requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('src/app/require.config.js') + '; require;');
    requireJsOptimizerConfig = merge(requireJsRuntimeConfig, {
        out: 'scripts.js',
        baseUrl: './src',
        name: 'app/startup',
        paths: {
            requireLib: 'bower_modules/requirejs/require'
        },
        include: [
            'requireLib',
            'components/nav-bar/nav-bar',
            'components/home-page/home',
            'text!components/about-page/about.html'
        ],
        insertRequire: ['app/startup'],
        bundles: {
            // If you want parts of the site to load on demand, remove them from the 'include' list
            // above, and group them into bundles here.
            // 'bundle-name': [ 'some/module', 'another/module' ],
            // 'another-bundle-name': [ 'yet-another-module' ]
        }
    });

    // Discovers all AMD dependencies, concatenates together all required .js files, minifies them
    gulp.task('js', function () {
        return rjs(requireJsOptimizerConfig)
            .pipe(uglify({ preserveComments: 'some' }))
            .pipe(gulp.dest('./dist/'));
    });

    // Concatenates CSS files, rewrites relative paths to Bootstrap fonts, copies Bootstrap fonts
    gulp.task('css', function () {
        var bowerCss = gulp.src('src/bower_modules/components-bootstrap/css/bootstrap.min.css')
                .pipe(replace(/url\((')?\.\.\/fonts\//g, 'url($1fonts/')),
            appCss = gulp.src('src/css/*.css'),
            combinedCss = es.concat(bowerCss, appCss).pipe(concat('css.css')),
            fontFiles = gulp.src('./src/bower_modules/components-bootstrap/fonts/*', { base: './src/bower_modules/components-bootstrap/' });
        return es.concat(combinedCss, fontFiles)
            .pipe(gulp.dest('./dist/'));
    });

下面就是我要找的，只是我不喜欢手动添加路径。这就是为什么我更喜欢像commonjs这样的JavaScript。我肯定记得看到了一种从bower_components文件夹中自动提取CSS文件的方式，我相信它在wordpress根项目中(基于bower.json中的设置/覆盖)。

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
gulp.task('css', function () {

    var files = [
        './public/bower_components/angular-loading-bar/build/loading-bar.css',
        './public/bower_components/fontawesome/css/font-awesome.css'
    ];

    return gulp.src(files, { 'base': 'public/bower_components' })
               .pipe(concat('lib.css'))
               .pipe(minifyCss())
               .pipe(gulp.dest('./public/build/css/')
    );
});

gulp.task('js-lib', function () {
    var files = [
        'public/bower_components/jquery/dist/jquery.js',
        'public/bower_components/bootstrap-sass/assets/javascripts/bootstrap.js'
    ];


    return gulp.src(files, { 'base': 'public/bower_components/' })
               .pipe(sourcemaps.init())
               .pipe(uglify({ mangle: false }))
               .pipe(concat('lib.js'))
               .pipe(sourcemaps.write('./'))
               .pipe(gulp.dest('./public/build/js/')
    );
});

您可以使用gulp main bower文件库在.bower.json中添加包的主文件，而不是手动声明它们。