javascript - How to properly minify/combine CSS/JS in web projects with url rewriting -

javascript - How to properly minify/combine CSS/JS in web projects with url rewriting -

i've been struggling hours trying set proper minification rewrites urls. i've used useref , usemin, , job of scanning html, aggregating js , css , outputting 1 file. but, life of me, cannot create url rewrite work properly. construction simple:

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

bootstrap.css refers font files using relative url - font/bootstrap_font.ttf when bootstrap gets minified, lands part of application css, in root now, path point root /font/bootstrap_font.ttf. original directory hierarchy stays, have url rewritten /vendor/bootstrap/font/bootstrap_font.ttf

and, oh, why cssmin task doesn't take more 1 file?

update here's 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 form, cssmin cannot used separately called target, because apparently configuration wrong - complains cannot take many files. doing wrong here?

from bits , pieces i've gathered, apparently it's crucial alter usemin flow , not allow concatenate css , cssmin later - because way, lose vital info directory origin of every css file. i've tried changing flow, doesn't work because of same cssmin error - cannot take many files.

okay, has same problem when started build css , js grunt. here solution of "relative urls" problem. please, note post not answering actual question, provide way of problem solution. have more nested folder construction works me, , hope helps you.

the gist build css/js folder , re-create assets files relatively new folder. allow give "build" name it:

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

using grunt-contrib-copy plugin re-create assets /build/assets directory without breaking original structure. relative passes css saves, fonts still in ./fonts/ folder.

the problem you'll faced such approach saving folder construction assets. well, solved detalization of build configuration in gruntfile. can not "okay grunt, build /**/*.css files application.css" have describe different cases different options of file structures. if project have obvious , logical file construction not complicated add together them.

i used rule every css file must have assets directory sibling. gruntfile expanded several lines , build construction 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 must have assets names naming rules prevent overriding files.

hope, helps you

javascript css gruntjs minify