using requirejs optimizer to minify to a single javascript and single css

Question

I am writing jQuery plugin and using requirejs in order to make my plugin modular and easier to code. The plugin has also its own css files. Now, I want to combine and minify all the js files and css files. I am using r.js to so it. Here is the build.js configuration file that knows how to concatenate and minify js files into one file:

({
    baseUrl: 'js/plugin',
    optimize: 'none', // none, uglify or uglify2
    wrap: true,
    name: '../vendor/almond',
    include: 'main',
    out: '../dist/jquery.my-plugin.min.js'
})

How can I add an option to minify also css file? I saw the cssIn option, but where do I tells r.js wha is the output name? Do I need to use modules? If so, how?

Answer 1

r.js automatically inlines contents of @import url(...) links in all .css files found in the project directory (thus concatenating multiple files into one master stylesheet).

In your current build configuration, however, with only baseUrl specified, r.js doesn't even know about the CSS folder (which is, presumably, somewhere in ../../style/ relative to js/plugin/). You'd have to add the appDir and dir properties to your buildconfig file (both explained in detail in the example config file) and set project root (ie. appDir) to directory that contains both JS and CSS folders.

Please note that, as mentioned in the documentation, adding appDir will require changing value of baseUrl to be relative to appDir.