Bundle .js and .css dependecies from package.json with gulp

I'm trying to convert an old project that uses Bower + gulp (+ npm) into something similar, which doesn't use Bower but keeps most of Gulp.

I'm stuck with reproducing the equivalent of wiredep, ie, picking all the relevant .js and .css from third party dependencies (which now are moved from Bower to package.json), to use them for either HTML injection or bundling all .js/.css into a single file.

Before, it was doing this, using a mix of wiredep and 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});
});

Now, I've managed to do this for the .js files:

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

This works in building a single dependency .js. That's not like the injection above, but I'd be fine with it.

However, I can't find any way to do the same for the .css files, because this:

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

picks up some */demo/demo.css and then I get the error that it has a syntax error.

I'm thinking that the above methods are wrong, selecting all .js/.css is too dumb, there should be a way to select the library-exported files, not all that can be found in its directory (ie, the gulp equivalent of wiredep).

But how to do it? Is it possible with Gulp? Should I migrate to something like webpack? And Yarn too?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/BVjrMYg