Gulp 合并 bower 文件

Posted 2023-02-22

【中文标题】Gulp 合并 bower 文件

【英文标题】：Gulp to combine bower files

【发布时间】：2015-05-28 01:49:09

【问题描述】：

我知道以前可能有人问过这个问题，但我似乎无法向 Google 提出正确的问题来找到我需要的东西。所以我可能以错误的方式思考这个问题。

基本上，我需要知道是否有一种方法可以将 Gulp 与 Bower 一起使用，以便 bower_components 下子目录中的所有 css 文件合并为一个 styles.css，@987654326 下子目录中的所有 js 文件@ 合并为一个scripts.js。 assetic 如何在 symfony2 中工作，将资产组合成单个文件。每个 bower_componets 子目录中的每个“构建”文件是否必须手动链接（在 Gulp 配置文件中），还是以编程方式循环遍历它们更常见？

谢谢

【问题讨论】：

如果您将 CSS 和 JS 定义为单独的任务，您可以将 gulp-concat 用于 CSS 和 JS。要列出您需要的 bower 组件，最好手动执行此操作，这样您就可以准确地知道自己在使用什么。

自动化是个坏主意。运行bower install ____ --save 命令并手动将 js 和 css 路径添加到构建过程需要 20 秒。以 bootstrap 为例，bootstrap.js、bootstrap.min.js 和各个组件文件之间存在重复。将它们全部包括在内会令人困惑并浪费带宽。您可以尝试gulp-useref 之类的方法来简化连接过程。手动指定要包含在资产中的文件的顺序和路径。自动化这只会带来问题

我的意思是将 bootstrap 的 js 和 tinymce 的 js 等压缩成一个要包含的缩小文件（与 bootstrap 中的所有单个组件文件相反）

useref 看起来可能会有所帮助。我发现自己使用 npm 而不是 bower（我知道这完全是一个不同的论点）但是使用 browserify 我可以说我想在我的项目中包含哪些库，它会自动处理包含和压缩

【参考方案1】：

以下内容会有所帮助吗？它循环遍历我的 'src' 目录中的所有 css 文件，并在 'dist' 中生成一个 css 文件> 文件夹。它对我的 js 文件也是如此：

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

【参考方案2】：

有一种方法，它真的很简单。你可以将“gulp-run”安装到你的 npm devDependencies，然后使用 run 来执行 bower install。

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

我刚刚发布的这个设置的真正美妙之处在于，这是一个名为“serve”的自定义 gulp 运行，它将使用开发服务器运行你的设置（具有实时重新加载和更好的错误智能）你所要做的就是转到您的目录并键入“gulp serve”，它将运行 bower install 并为您构建所有内容。显然文件夹结构不同，因此您需要进行一些修改，但希望这显示了您如何使用 gulp 运行 bower :)

【参考方案3】：

我一直在寻找类似下面的内容，但我不喜欢手动添加路径。这就是为什么我更喜欢像 CommonJS 这样的 Javascript。我绝对记得看到过一种从 bower_components 文件夹中自动获取 CSS 文件的方式，我相信它在 Wordpress Roots 项目中（基于 bower.json 中的设置/覆盖）。

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

【参考方案4】：

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