我不明白如何正确使用 Bower

Question

我正在构建一个站点，我决定使用 bootstrap 模板作为后端（管理工具等等）。

我喜欢 sb-admin-2 (http://startbootstrap.com/template-overviews/sb-admin-2/) 的外观，但我对如何在我的站点中实际使用它感到困惑。我安装了 Bower 并使用 bower install startbootstrap-sb-admin-2

安装了 sb-admin

现在我有一个名为 bower_components 的文件夹，里面装满了所有相关包...但是，这些包也包括开发文件。

如果我按原样上传到我的网站，其中 80% 将是不必要的源数据。我目前在我的项目中使用 Gulp，但我还不知道这 2 个应该如何交互。是否有一个 gulp 包可以将 bower_components 编译成 1 个简洁的东西？

我是这种工作流程的新手，尽管我很努力也找不到问题的答案。抱歉，如果我听起来像个菜鸟。

Answer 1

没有预构建的 gulp 包可以引入所有 Bower 源文件。您应该编写一个仅提取所需文件的任务。这是我正在处理的一个项目的示例（已简化）：

var scripts = [
    'bower_components/timezone-js/src/date.js',                             // https://github.com/mde/timezone-js
    'bower_components/jquery/jquery.min.js',                                // http://api.jquery.com/
    'bower_components/jquery-migrate/jquery-migrate.js',                    // https://github.com/appleboy/jquery-migrate
    'bower_components/jquery-ui/ui/minified/jquery-ui.min.js',              // todo: include just the bits we need
    'bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.min.js',   // https://github.com/furf/jquery-ui-touch-punch
    'bower_components/jquery-cookie/jquery.cookie.js',                      // https://github.com/carhartl/jquery-cookie
    'bower_components/jquery.expander/jquery.expander.min.js',              // https://github.com/kswedberg/jquery-expander
    'bower_components/jquery.transit/jquery.transit.js',                    // http://ricostacruz.com/jquery.transit/
    'bower_components/select2/select2.min.js',                              // http://ivaynberg.github.io/select2/
    'bower_components/fancybox/source/jquery.fancybox.pack.js',             // http://fancyapps.com/fancybox/
    'bower_components/lodash/dist/lodash.compat.min.js',                    // https://lodash.com/docs
    'bower_components/underscore.string/dist/underscore.string.min.js',     // https://github.com/epeli/underscore.string#string-functions
    'bower_components/json2/json2.js',                                      // https://github.com/douglascrockford/JSON-js
    'bower_components/jquery-validation/dist/jquery.validate.min.js',       // http://jqueryvalidation.org/documentation/
    'bower_components/jquery-file-upload/js/jquery.iframe-transport.js',
    'bower_components/jquery-file-upload/js/jquery.fileupload.js',          // https://blueimp.github.io/jQuery-File-Upload/
    'bower_components/DataTables/media/js/jquery.dataTables.js',            // https://datatables.net/
];

gulp.task('scripts', function () {
    return gulp.src(scripts, {base: '.'})
        .pipe(plumber())
        .pipe(sourcemaps.init({
            loadMaps: false,
            debug: debug,
        }))
        .pipe(concat('all_the_things.js', {
            newLine:'\n;' // the newline is needed in case the file ends with a line comment, the semi-colon is needed if the last statement wasn't terminated
        }))
        .pipe(uglify({
            output: { // http://lisperator.net/uglifyjs/codegen
                beautify: debug,
                comments: debug ? true : /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
            },
            compress: { // http://lisperator.net/uglifyjs/compress, http://davidwalsh.name/compress-uglify
                sequences: !debug,
                booleans: !debug,
                conditionals: !debug,
                hoist_funs: false,
                hoist_vars: debug,
                warnings: debug,
            },
            mangle: !debug,
            outSourceMap: true,
            basePath: 'www',
            sourceRoot: '/'
        }))
        .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/',
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest('www/js'))
});

我正在挑选我想要的源文件，合并并缩小它们，然后将它们转储到我的 public 目录中，以便可以提供给客户端。您不需要将 bower_components 文件夹上传到您的生产服务器；但它可能也不会造成太大伤害（它没有那么大！）。

我不明白如何正确使用 Bower

I don't understand how to work Bower properly

node.js

twitter-bootstrap

gulp

bower