Question about the embedding of CSS in the bundle

[PaulDejardin]

Let me start off by saying that I am new to using browserify. I'm curious why the css is inserted into the body of the bundle.js which just inserts link tags into the head when loaded. Is this an appropriate artifact to release to production or am I missing something fundamental here? I'd like the workflow to be:

bundle -> which produces a js and css file minify/uglify release

at the end of that process I want two files:

myLib.min.js myLib.min.css

It doesn't look like browserify-css accomplishes that. Does this functionality fall in the purview of browserify-css or even browserify in the first place for that matter?

[cheton]

The browserify-css transform doesn't generate CSS files, instead, it loads CSS files you've generated, concatenates & minifies all the descendants CSS files with @import statements, and bundle CSS into a JS bundle file.

It's useful for modularization if you have multiple JS bundles, and each JS bundle has its own CSS dependency, so you don't need to manually load them from HTML.

If you only want to minify CSS files and load CSS files from HTML, I recommend you using Clean-CSS: https://github.com/jakubpawlowicz/clean-css. It is a fast and efficient tool for minifying CSS files.

[PaulDejardin]

I'd like to be able to write a js file , call it a.js with the content

require('a.css');

and compile a.js such that there are two resulting files; bundle.js and bundle.css. The former would contain all the javascript created by traversing the tree of required js files and the the later would contain all the resolved files css simply concatenated together. Do you know of a tool that accomplishes that? The RequireJS optimizer will do it but I can't use that for non-technical reasons.

[cheton]

It is doable by adding a separateCSS option to build separate CSS files instead of inlining with JS bundle. That will be similar to the configuration of require-css.

If it's exactly what you said, I can start to work on it in the next few days.

[PaulDejardin]

That would be perfect. Right now I'm working on creating an elaborate series of streams to do effectively do the same thing by intercepting the files traversed by the bundle and attempting to figure out if they have any associated css, and would be very interested in replacing this solution by using separateCSS. Thank you!

[stefan--]

+1

[cheton]

Added a new option onFlush in v0.9.0. You can check out an example here.