我不明白如何正确使用 Bower
I don't understand how to work Bower properly
我正在构建一个站点,我决定使用 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 个简洁的东西?
我是这种工作流程的新手,尽管我很努力也找不到问题的答案。抱歉,如果我听起来像个菜鸟。
没有预构建的 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
文件夹上传到您的生产服务器;但它可能也不会造成太大伤害(它没有那么大!)。
我正在构建一个站点,我决定使用 bootstrap 模板作为后端(管理工具等等)。
我喜欢 sb-admin-2 (http://startbootstrap.com/template-overviews/sb-admin-2/) 的外观,但我对如何在我的站点中实际使用它感到困惑。
我安装了 Bower 并使用 bower install startbootstrap-sb-admin-2
现在我有一个名为 bower_components 的文件夹,里面装满了所有相关包...但是,这些包也包括开发文件。
如果我按原样上传到我的网站,其中 80% 将是不必要的源数据。 我目前在我的项目中使用 Gulp,但我还不知道这 2 个应该如何交互。是否有一个 gulp 包可以将 bower_components 编译成 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
文件夹上传到您的生产服务器;但它可能也不会造成太大伤害(它没有那么大!)。