How to properly minimize / combine CSS / JS in web projects with URL rewriting

Question

I'm struggling to set up the correct definition, which really rewrites the urls. I used useref and usemin, and they do a good html scan, aggregating all JS and CSS and outputting them to a single file. But for my life, I cannot get URL rewriting to work properly. My structure is simple:

\root index.html application.css // minified application.js // minified \vendor \bootstrap \fonts // font files here bootstrap.css // pre-minified 

bootstrap.css refers to font files using the relative url - font/bootstrap_font.ttf When bootstrap gets minified, it lands as part of the css application, that is, in my root now, so the path will point from root to /font/bootstrap_font.ttf . The original directory hierarchy remains, so I would like this URL to be rewritten to /vendor/bootstrap/font/bootstrap_font.ttf

And oh, why does the cssmin task not accept more than one file?

UPDATE Here is my current grunt file:

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), useminPrepare: { html: 'web/public/index.html', options: { dest: 'web/public-dist' } }, usemin: { html: 'web/public-dist/index.html', }, copy: { all: { files: [{ expand: true, cwd: 'web/public/', src: ['**'], dest: 'web/public-dist/' }] }, resources: { files: [{ expand: true, cwd: 'web/public/', src: ['**/*.*', '!**/*.js', '!**/*.css', '!**/*.txt'], dest: 'web/public-dist/' }] } }, uglify: { options: { mangle: true, sourceMap: false, compress: true, banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, standard: { files: [{ expand: true, cwd: 'web/public-dist/', src: ['**/*.js'], dest: 'web/public-dist/' }] } }, cssmin: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', }, standard: { files: [{ expand: true, cwd: 'web/public-dist/', src: ['**/*.css'], dest: 'web/public-dist/' }] }, } }); grunt.registerTask('package', [ 'copy:resources', 'useminPrepare', 'concat:generated','cssmin:generated', 'uglify:generated', 'usemin']); }; 

In this form, cssmin cannot even be used as a separately named target, because it seems that its configuration is incorrect - it complains that it cannot accept many files. What am I doing wrong here?

From the pieces and pieces that I put together, it is apparently important to change the usemin stream and not let it concatenate all css and cssmin later - because in this way it will obviously lose vital information about the directory origin of each css file. I tried to change the stream, but then it does not work due to the same cssmin error - it cannot accept many files.

Answer 1

Ok, I definitely have the same problem when I started building my css and js with grunts. Here is my solution to the "relative URL" problem. Please note that this post does not answer your real question, but provides a different way to solve problems. I have even more nested folder structure, but it works well for me, and hope this helps you.

The bottom line is to collect all css / js in another folder and copy the data files regarding this new folder. Let's give it the name "build":

 \root \build application.css - minified application.js - minified \fonts ... \img ... ... index.html \ ... 

Using the grunt-contrib-copy plugin copies all your assets to the / build / assets directory without breaking their original structure. Thus, relative gaps for your css are preserved, the fonts are still in the folder. / fonts /.

The problem you have to face with this approach is to maintain the folder structure for assets. Well, this is solved with the granularity of your build configuration in your grunt file. Now you cannot say "okay grunt, build all / ** / *. Css files to application.css", but you should describe different cases for different variants of file structures. If your project has an obvious and logical file structure, it is not difficult to add.

I used the rule that every css file should have a resource directory that is native. Thus, a gruntfile expanded with several lines and an assembly structure looks something like this:

 \root \build \css \assets \fonts \img application.css - minified //all relative passes saved \foo \bar \biz \assets \fonts first.css \row \assets \img second.css index.html 

Obviously, you must have file naming conventions to prevent file overrides.

Hope this helps you