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

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.