我正在建立一个网站,并且我决定使用自举模板作为后端(管理工具和诸如此类的东西)。
我喜欢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编译成简洁的东西?
我是这种工作流程的新手,尽管付出了努力,但我无法找到问题的答案。如果我听起来像一个总菜鸟,请道歉。
答案 0 :(得分: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
文件夹上载到生产服务器;但它也许不会伤害太多(它不是那么大!)。