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 t

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

You can obtain a similar effect by first adding 'require-css' to your project (by way of bower most easily) and then use the following construct in your main.js or gruntfile.js:

shim:{
 'app/my.module': {
            deps:[
                "css!app/css/app.css"
            ]
        }
}

After this the r.js optimizer will minifi and concatenate your css dependency into it's outputted js file.

Answer 3

RequireJS can minify CSS files.

All you need to do is use this option:

optimizeCss: 'default'

Answer 4

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.