Using r.js to concatenate CSS

Question

I'm working on a project using require.js and plan to optimize it using r.js. The optimization for javascript files is built in as part of the require configration automatically.

What I would like is to split the CSS into several different files, e.g. head.css, body.css, main.css, etc. When r.js runs, it should concatenate these into a single file. The HTML would have:

<link rel=stylesheet type=text/css href=css/main.css>

A problem is that during development, the files will still be split up. I'd like to keep them split and don't want to have to redo the optimization every time -- even if it can be done automatically.

I'd also like to be able to keep the HTML with just the one stylesheet reference even in development. What would be the optimal way to do this?

There are several possibilities that I can see, each with potential problems:

Have main.css use @import to include all other CSS files.
- Not automatic -- have to edit main.css for each file. That's not a big deal since the number of files will be relatively small and probably all known very early on.
- r.js does not optimize this
Use require-css
- This seems to be geared more towards AMD loading of CSS -- I'd rather load all the CSS up front
- Same issues with automatic loading of CSS files as the other option
Create my own script that calls r.js without CSS optimization, concatenate all of the CSS files and minify appropriately.
- I'm sure there's someone out there who has done this better than I will

A solution that worked for me: stackoverflow.com/a/29028917/1254597 — Dan Ochiana
– Dan Ochiana, Commented Mar 13, 2015 at 9:40

dezman · Accepted Answer · 2013-11-08 18:14:47Z

2

I use grunt-contrib-cssmin which works great. You can also pass arguments to grunt, so you can have grunt:dist combine all your css and plain grunt will leave them separate.

module.exports = function (grunt) {
  grunt.initConfig({
    cssmin: {
      add_banner: {
        options: {
          banner: '/* My minified css file */'
        },
        files: {
          'dist/css/dist.min.css': ["bower_components/bootstrap/dist/css/bootstrap.css", "tmp/css/dist.css"]
        }
      }
    }
  })
}

Grunt getting started.

There is also a requirejs script for grunt. The setup looks like this:

requirejs: {
  compile: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}

edited Nov 8, 2013 at 18:14

answered Nov 8, 2013 at 18:08

dezman

19.6k13 gold badges58 silver badges92 bronze badges

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

4 Comments

Explosion Pills Over a year ago

Will grunt play nice with r.js as well? Or is there a grunt contrib that will optimize based on AMD?

Explosion Pills Over a year ago

This also does not address the issue of keeping CSS files separate during development and still being able to load them

dezman Over a year ago

r.js does play nicely with grunt. But keeping CSS files separate during development is something i have wanted to do, but have not found a great solution yet. I think the index.html needs to be built to include the correct stylesheets for dev or deploy

fraxture Over a year ago

Is there a way to add a banner to a js file compiled by requirejs?

Collectives™ on Stack Overflow

Using r.js to concatenate CSS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related