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

There are some easy steps to follow:

1. (method 1 Preferred) Create a style.css file by concatinating all your CSS files into one

   cat css/firstfile.css css/secondfile.css > style.css

   (method 2) Create a style.css file and @import all your other css's into this file.

   @import url("css/firstfile.css");

   @import url("css/secondfile.css");

2. Create a build.js file as follows:

   ({ cssIn: './css/style.css', out: './css/style.min.css', optimizeCss: 'default' })

3. Using require.js minify this file

   r.js -o build.js

4. Modify your index.html to only include this minified style.min.css file

   <link rel="stylesheet" type="text/css" href="css/style.min.css">

NOTE

The reason why method 1 is preferred is if you use import CSS files get imported as "link" and the browser still has to make separate calls to fetch them, but if you concat all the files it's one single css and it'll transfer and gzip better.

Answer 2

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.