如果有人能告诉我一个处理捆绑凉亭组件的好方法，我将不胜感激。我觉得我已经尝试了一切......虽然，我似乎无法找到任何处理这个的吞咽任务。难道真的不存在吗？
假设它不存在。最坏的情况是我必须从 bower_components 文件夹中指定每个“dist”文件的路径。 （令人讨厌的是，每个组件似乎都有自己的“dist”文件夹……没有什么是标准化的。）
所以即使我这样做了，我也注意到一些像“active-support”这样的组件似乎有require('lodash') 之类的。我认为，如果我只是简单地复制该文件，它将中断，因为需求无法解决。
我错过了什么？我如何简单地将所有 bower_components 并捆绑到“common.js”中......有没有办法或者它是一个clusterfluck？
【问题讨论】：
如果你有这样的文件夹：
-app
-bower
-node_modules
Gulpfile.js
package.json
解决办法是：
gulp.task("connect", function () {
connect.server({
root: ["app"],
livereload: true,
port: 8034,
middleware: function (connect) {
return [connect().use("/bower", connect.static("bower"))];
}
});
});
【讨论】：
如果您的项目使用 AMD 规范。
您可以使用gulp-edp 捆绑模块。
在 module.conf
中设置模块信息{
"baseUrl": "src",
"paths": {},
"packages": [
{
"name": "etpl",
"location": "../bower_components/etpl/3.0.1/src",
"main": "main"
},
{
"name": "jquery",
"location": "../bower_components/jquery/1.9.1/src",
"main": "jquery.min"
}
],
"combine": {
"app": true
}
}
gulpfile.js
var gulp = require('gulp');
var edp = require('gulp-edp');
gulp.src(
[
'src/**/*.js'
'bower_components/**/*.js',
'!bower_components/**/{demo,demo/**}',
'!bower_components/**/{test,test/**}'
]
)
.pipe(edp({
getProcessors: function () {
var moduleProcessor = new this.ModuleCompiler();
return [moduleProcessor];
}
}))
.pipe(gulp.dest('dist'));
查看EDP wiki了解更多功能。
【讨论】：
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
gulp.task('TASKNAME', function() {
return gulp.src(mainBowerFiles())
.pipe(/* what you want to do with the files */)
});
【讨论】：
这就是我管理它的方式（但请参阅 gulpfile.js 了解项目结构，它不是一个巨大的 gulpfile）：
https://github.com/notbrain/viceroy/blob/master/gulp/tasks/bower.js
会更模块化一点，简单地连接所有 Bower 部门，然后根据 dev/prod 环境目标在 dist/源位置分别执行 uglify() 和 minifyCSS() 任务，但必须等待未来的更新.
【讨论】：
正如 Alerty 所指出的，新的 Gulp 政策似乎是：直接使用 bower 和 glob 模式（并希望包维护者具有适当的“忽略”属性）。
您可以使用main-bower-files 或gulp-bower-src 从您的凉亭组件中获取文件。他们还可以在您自己的 bower 文件中使用“忽略”或“主要”覆盖。
【讨论】：
"lib" 中，则执行类似 gulp.src("./lib/**).pipe(...).pipe(gulp.dest("../dist/"));