How to minify css files with RequireJS

Question

I have a backbone project with several js files and a couple of css files

I'd like to have them minified to a single js and a single css

So far, I managed to concatenate and minify all my js file to a single main.min.js

Now I'm trying to do the same with the css files

this is my layout:

css
  bootstrap.css
  docs.css
  ...
js
  optimize-node (script to run the optimizer)
  app
    main.js (entry point of my app)
    require-main.js
index.html

this is my script to minify it

# optimize-node
node ../../r.js -o baseUrl=. mainConfigFile=app/require-main.js

this is my require-main.js

/*globals require*/
'use strict';
// Set the require.js configuration file for your application
require.config({

  // uncomment to create a single file with no optimization at all
  // optimize: 'none',
  baseUrl: 'js',

  // Initialize the application with the main application file
  deps : ['app/main'],

  preserveLicenseComments: false,

  out  : 'main.min.js',
  name : 'app/main',

  paths: {
    // Embed require in main.min
    'requireLib' : 'lib/require.min',

    // Libraries
    jquery       : 'lib/jquery-1.10.1',
    jqueryui     : 'lib/jquery-ui-1.8.21.custom',
    moment       : 'lib/moment-2.0.0',
    datepicker   : 'lib/bootstrap-datepicker-1.0.1',

    [...]
  },
  include : ['requireLib'],
  shim: {
    lodash: {
      exports: '_'
    },
    backbone: {
      deps    : ['lodash', 'jquery'],
      exports : 'Backbone'
    },
    [...]
  }
});

with this configuration, when I run optimize-node, it all works prefectly fine, and a js/app/main.min.js file is generated

Now I'm trying to modify the configuration to generate this file and also a css/main.min.css file with the contents of css/*.css concatenated and minified

I tried replacing these lines

// single file optimization
out  : 'main.min.js',
name : 'app/main',

with this configuration to define two modules, one for the js and another for the css

// multiple file optimization
dir: '../../build',
appDir: '../',
modules: [
  {
    name: 'app/main',
    include: ['app/main']
  }
],

But it doesn't work as expected

My whole project is copied to ../../build, and each file is optimized

And I don't know how to add another module that would just pick the css files

Perhaphs I should create a require-css.js file that just takes care of css/*.css files

Can anybody help me with this? I think it should be a pretty common scenario

Answer 1

r.js doesn't work this way: (from the docs)

RequireJS has an optimization tool that does the following

(...)

Optimizes CSS by inlining CSS files referenced by @import and removing comments.

You'll have to create one "master" stylesheet which references individial CSS files via @import, there's no option for concatenation of *.css in a specified folder.