How to minimize css files with RequireJS

Question

I have a basic project with several js files and several css files

I would like them to be reduced to one js and one css

So far I have managed to merge and minimize my entire js file to one main.min.js

Now I am trying to do the same with 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 minimize 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, everything works fine and the js / app / main.min.js file is created

Now I am trying to change the configuration to generate this file, as well as the css / main.min.css file with the contents of css / *. css concatenated and reduced

I tried replacing these lines

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

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

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

But it does not work properly

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

And I do not know how to add another module that will simply select css files

Perhaphs I have to create a require-css.js file that just takes care of the css / *. Css files

Can someone help me? I think this should be a fairly common scenario.

Answer 1

r.js does not work as follows: ( from docs )

RequireJS has an optimization tool that performs the following

(...)

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

You need to create one "master style sheet" that refers to individual CSS files using @import , there is no option to concatenate * .css in the specified folder.

Answer 2

There are a few simple steps:

• (Method 1 Preferred ) Create a style.css file, combining 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 other css to this file.

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

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

• Create the build.js file as follows:

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

• Using require.js minimizes this file

  r.js -o build.js

• Modify your index.html to include this mini-typed style.min.css file

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

Note

The reason Method 1 is preferred is because if you use import CSS files that are imported as a “link” and the browser still needs to make separate calls to retrieve them, but if you combine all the files, then one css and it will transmit and gzip is better.

Answer 3

RequireJS can minimize CSS files.

All you have to do is use this option:

 optimizeCss: 'default' 

Answer 4

You can get a similar effect by first adding “require-css” to your project (using bower the easiest way), and then use the following construct in main.js or gruntfile.js:

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

After that, the r.js optimizer will be minifi and combine your css dependency with this js output.