Estoy tratando de convertir un proyecto antiguo que usa Bower + gulp (+ npm) en algo similar, que no usa Bower pero conserva la mayor parte de Gulp.

Estoy atascado con la reproducción del equivalente de wiredep, es decir, seleccionando todos los .js y .css relevantes de las dependencias de terceros (que ahora se han movido de Bower a package.json ), para usarlos para la inyección de HTML o para agrupar todos los . js/.css en un solo archivo.

Antes, estaba haciendo esto, usando una combinación de wiredep e inject:

 gulp.task('inject-html', ['compile-styles'], function () { $.util.log('injecting JavaScript and CSS into the html files'); var injectStyles = gulp.src(config.outputCss, { read: false }); var injectScripts = gulp.src(config.js, { read: false }); var wiredepOptions = config.getWiredepDefaultOptions(); var injectOptions = { ignorePath: ['src', '.tmp'], addRootSlash: false, }; var wiredep = require('wiredep').stream; return gulp.src(config.html) .pipe(wiredep(wiredepOptions)) .pipe($.inject(injectStyles, injectOptions)) .pipe($.inject(injectScripts, injectOptions)) .pipe(gulp.dest(config.srcDir), {overwrite: true}); });

Ahora, logré hacer esto para los archivos .js:

 gulp.task('bundle-deps', function () { var deps = Object.keys(packageJson.dependencies) .map(module => `node_modules/${module}/**/*.js`); // set up the browserify instance on a task basis var b = browserify({ entries: './package.json', debug: true }); return b.bundle() .pipe(source('genemap-lib.js')) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true})) // debug info for the browser .pipe(uglify()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./dist/js/')); });

Esto funciona en la construcción de una sola dependencia .js. Eso no es como la inyección anterior, pero estaría bien con eso.

Sin embargo, no puedo encontrar ninguna forma de hacer lo mismo con los archivos .css, porque esto:

 gulp.task('bundle-deps-css', function () { var deps = Object.keys(packageJson.dependencies); var depsCss = deps.map(module => `node_modules/${module}/**/*.css`); return gulp.src( depsCss ) .pipe(concatCss("genemap-lib.css")) .pipe(gulp.dest('dist/styles/')); });

recoge algunos */demo/demo.css y luego aparece el error de que tiene un error de sintaxis.

Estoy pensando que los métodos anteriores son incorrectos, seleccionar todos los .js/.css es demasiado tonto, debería haber una forma de seleccionar los archivos exportados de la biblioteca, no todos los que se pueden encontrar en su directorio (es decir, el equivalente de trago de profundidad de cable).

¿Pero como hacerlo? ¿Es posible con Gulp? ¿Debo migrar a algo como webpack? ¿Y el hilo también?