Require stylesheets and inject them to html as link tag with browserify

Question

I wanna try using browserify for building my projects. It looks pretty cool that I can require js files using relative paths, then bundle and minify that files alltogether. But it remains unclear to me yet, if I can automatically add that bundle to html as

<script src=".../.../bundle.min.js"></script>

And, if I can do a similar trick with css - somehow require css files, including vendor ones, bundle and minify that files and inject that bundled css to html head as <link> tag, not <style>.

Is that possible? If so how? Or, maybe such an idea itself is just a misunderstanding of how projects should be built? If so, where am I mistaking?

Answer 1

You should check browserify-css It allows the minification, inserting in another bundle css file.
But the main function of browserify is to build the JavaScript files into a single main one, but not css processing. It just is not created for css.

Answer 2

I use Microsoft Ajax Minifier to just that. I create the bundled scripts just for what in need for both css and js. It has a -pretty option that just copies the files but not minify to make it easier r to debug.

Order of files matters.

On CSS, be careful if you are using embedded icons such as background-icon:url("somefile.jpg"). Your images have to be placed relative to the path used in the css where ever the bundled files end up, not where your page is.