How to Minify CSS Files with Requirejs

How to minify css files with RequireJS

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.

using requirejs optimizer to minify to a single javascript and single css

r.js automatically inlines contents of @import url(...) links in all .css files found in the project directory (thus concatenating multiple files into one master stylesheet).

In your current build configuration, however, with only baseUrl specified, r.js doesn't even know about the CSS folder (which is, presumably, somewhere in ../../style/ relative to js/plugin/).
You'd have to add the appDir and dir properties to your buildconfig file (both explained in detail in the example config file) and set project root (ie. appDir) to directory that contains both JS and CSS folders.

Please note that, as mentioned in the documentation, adding appDir will require changing value of baseUrl to be relative to appDir.

Minifying RequireJS Javascript codebase to a single file

What you want is the RequireJS Optimizer.

The optimizer does the following (from the docs):

• Combines related scripts together into build layers and minifies them via UglifyJS (the default) or Closure Compiler (an option when using Java).
• Optimizes CSS by inlining CSS files referenced by @import and removing comments.

Here's one article on the topic for further reference.

Have a look also at r.js, the command line tool which includes the optimizer. Using r.js, you can generate an optimized build from an application file main.js with just:

node r.js -o build.js

where build.js is a requirejs config file containing your build profile (baseUrl, paths, etc.).

RequireJS: Loading modules including templates and CSS

You can specify the template as a dependency using the text! module like you have shown. I do this with Mustache Templates.

However Require.js does not explicitly support css files.

Here is the official explanation, it's explained pretty well:
http://requirejs.org/docs/faq-advanced.html#css

Edit: Feb 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module
http://handlebarsjs.com/precompilation.html

Edit: August 2015

If you're after this sort of modularization you should look into webpack and specifically css-loader. I'm using it to pair .css files with .jsx files as a unified "module" and extract the relevant CSS into a single stylesheet at build time.

Is there a way to minify css files at build time?

Understanding your question right, you want to concat and minify your css sources and time you build or deploy.

I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.

On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.

Once your task is created you can add it to your build script, task or bash.

This way works also fine with CI like wercker or travis.

---

Related Topics