I’ve been doing this, using Browserify to stitch my JS files together, though I’ve just got a bunch of NPM scripts instead of an actual task runner (because I’m a masochist, I guess). node-sass takes care of my style files. At this point, I’ve got the setup working with React and vanilla JS projects. One challenge I had early on was to somehow get two simultaneous builds, one being for the vendor code (React, Bootstrap, RxJS, jQuery, et al.) that rarely changes, and the other for just my code which would be rebuilt every time a watched file changes. That’s much easier to do with Gulp/Webpack than NPM scripts (so… yeah, masochist), but I did it, and it greatly speeds up build time.
“Problems” might not be the right word to describe what I’ve had with this setup, but there are a few ‘gotchyas’ and pitfalls that I wish I had know about. Because of the way Browserify resolves dependencies in each module, some vendor code that depends on other vendor code will, in some cases, crap itself and die. I’m thinking in particular of Bootstrap’s dependency on jQuery, which takes a bit of extra code to work around for some reason. It’s also a bit more work to keep track of what you need to include in each file. My biggest issue right now is that the code that gets modularized isn’t accessible in the global scope, which means I have to change the way I write D3 code. I’m still trying to find the best way to integrate that into my workflow.
This is the way web development is going, so it’s good to start practicing the workflow now. One tip is that you can learn a lot about this sort of practice by checking out Yeoman generators. The one caveat here is that you don’t want to rely on those generators, but instead try to integrate what you’ve learned into your own workflow. Most of those generators are extremely complex and will do more harm than good for you.