Question

我正在建立一个网站，并且我决定使用自举模板作为后端（管理工具和诸如此类的东西）。

我喜欢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编译成简洁的东西？

我是这种工作流程的新手，尽管付出了努力，但我无法找到问题的答案。如果我听起来像一个总菜鸟，请道歉。

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

我正在挑选我想要的源文件，合并和缩小它们，并将它们转储到我的公共目录中，以便可以提供给客户端。您无需将bower_components文件夹上载到生产服务器;但它也许不会伤害太多（它不是那么大！）。

我不明白如何正确地使用Bower

1 个答案: