Hi,
I just started learning Angular, and it seems like everything is split up in a new file. So I thought I’d try it with a non-Angular project (pomodoro timer). I split the CSS and JS into seperate files and then use gulp to combine it again on file-change.
I would like to know if anyone else is doing this. Or if you know any problems with this approach?
I’m not that far along, so i could be missing the point here,… but arent they always seperate files anyway?
Edit, after reading the response, I’ll leave my ignorance here for all to see and learn from 
I think he meant modularized JS and CSS, and then bundle all JS file into one JS file and all CSS file into one CSS file.
@BenGitter I’ve been doing this with a WordPress site I’m making for a friend, and it works pretty well. My tasks are pretty simplistic (ES6 compilation, JS bundling, Sass transform, image minification, and file compression), but if you need any help, let me know, and I can try to help!
Thanks, that’s indeed what I meant. So for example a CSS file for styling the header, one for the footer etc. And JS files per module.
ES6 compilation is a good one.
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.