吞下bower_components的Gulp任务?

时间:2014-04-29 08:14:57

标签: bower gulp

如果有人能告诉我处理捆绑式割草机组件的好方法,我会非常感激。我觉得我已经尝试了所有的东西......虽然,我似乎无法找到任何处理这个问题的gulp任务。真的不存在吗?

让我们说它不存在。最糟糕的情况是我必须指定每个" dist"的路径。来自bower_components文件夹的文件。 (令人讨厌的是,每个组件似乎都有自己的" dist"文件夹...没有标准化。)

所以,即使我这样做,我也注意到一些组件,如“积极支持”等。似乎有require('lodash')等等。我认为,如果我只是简单地复制该文件,它将会因为要求不会解决而中断。

我错过了什么?我如何简单地将所有bower_components捆绑到一个" common.js" ...有没有办法或者它是一个集群虚张声势?

5 个答案:

答案 0 :(得分:12)

更新

正如Alerty所指出的,新的Gulp政策似乎是:直接使用bower和glob模式(并希望软件包维护者有一个合适的"忽略"属性)。


以前

您可以使用main-bower-filesgulp-bower-src从凉亭组件中获取文件。他们也可以使用"忽略"或"主要"在你自己的凉亭文件中覆盖。

答案 1 :(得分:2)

这就是我管理它的方式(但是对于项目结构,请参阅gulpfile.js,它不是一个巨大的gulp文件):

https://github.com/notbrain/viceroy/blob/master/gulp/tasks/bower.js

根据dev / prod env目标,简单地连接所有bower deps然后在dist / source位置单独执行uglify()和minifyCSS()任务会更加模块化,但是必须等待将来的更新

答案 2 :(得分:0)

使用main-bower-files

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 */)
});

答案 3 :(得分:0)

如果您有以下文件夹:

-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"))];
    }
  });
});

答案 4 :(得分:-1)

如果您的项目使用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