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

Reza S · Accepted Answer · 2015-10-05 19:44:54Z

20

There are some easy steps to follow:

(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");
Create a build.js file as follows:

({ cssIn: './css/style.css', out: './css/style.min.css', optimizeCss: 'default' })
Using require.js minify this file

r.js -o build.js
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.

edited Oct 5, 2015 at 19:44

answered Sep 20, 2013 at 23:04

Reza S

9,8045 gold badges58 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kryger Over a year ago

Actually there's no need to rename minified file (i.e. style.css -> style.min.css), r.js can inline contents in-place. This way index.html can refer to the same stylesheet name in development and production.

Reza S Over a year ago

Can you elaborate more on this?

kryger · Accepted Answer · 2013-06-03 19:08:14Z

7

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.

answered Jun 3, 2013 at 19:08

kryger

13.2k8 gold badges47 silver badges68 bronze badges

Comments

Scott Tesler · Accepted Answer · 2014-11-09 22:57:46Z

0

RequireJS can minify CSS files.

All you need to do is use this option:

optimizeCss: 'default'

answered Nov 9, 2014 at 22:57

Scott Tesler

39.9k4 gold badges27 silver badges20 bronze badges

1 Comment

coding_idiot Over a year ago

doesn't work, we probably have to specify cssIn, but then how will it work for multiple CSS files is another issue.

Dan Ochiana · Accepted Answer · 2015-03-13 09:36:14Z

0

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.

answered Mar 13, 2015 at 9:36

Dan Ochiana

3,4381 gold badge32 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to minify css files with RequireJS

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related