bower - tag - placas y titulos en maryland

¿Tratar la tarea de agrupar los componentes_bower?

Question

Apreciaría mucho si alguien pudiera por favor decirme una buena manera de manejar el agrupamiento de componentes Bower. Siento que lo he intentado todo ... Aunque, parece que ya no puedo encontrar ninguna tarea trilla que maneje esto. ¿Podría realmente no existir?

Digamos que no existe. En el peor de los casos, tengo que especificar las rutas de cada archivo "dist" de la carpeta bower_components. (Es molesto que cada componente parezca tener su propia carpeta "dist" ... nada está estandarizado).

Así que incluso si hago eso, he notado que algunos componentes como ''soporte activo'' parecen tener require(''lodash'') y similares en ellos. Creo que si simplemente copio ese archivo, se romperá porque los requisitos no se resolverán.

¿Qué me estoy perdiendo? ¿Cómo simplemente tomo todos los bower_components y el paquete en un "common.js" ... hay una manera o es un clusterfluck?

Answer 1

Actualizar

Como lo señaló Alerty, la nueva política de Gulp parece ser: usar directamente los patrones de Bower y glob (y esperar que los mantenedores de paquetes tengan las propiedades de "ignorar").

Previamente

Puede usar main-bower-files o gulp-bower-src para obtener archivos de sus componentes de bower. También pueden usar las anulaciones "ignorar" o "principales" en su propio archivo Bower.

Answer 2

Así es como lo logré (pero vea gulpfile.js para la estructura del proyecto, no es un solo gulpfile gigantesco):

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

Sería un poco más modular para simplemente concentrar todas las dependencias de Bower y luego realizar las tareas uglify () y minifyCSS () por separado en las ubicaciones dist / source, según los objetivos de desarrollo dev / prod, pero tendrá que esperar futuras actualizaciones.

Answer 3

Si su proyecto utiliza la especificación AMD.

Puedes usar gulp-edp bundle los módulos.

configurar información del módulo en 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''));

Ver wiki de EDP para más características.

Answer 4

Si tienes carpetas como:

-app
-bower
-node_modules
Gulpfile.js
package.json

Las soluciones son:

gulp.task("connect", function () {
  connect.server({
    root: ["app"],
    livereload: true,
    port: 8034,
    middleware: function (connect) {
      return [connect().use("/bower", connect.static("bower"))];
    }
  });
});

Answer 5

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