gruntjs - Relative paths in CSS and Grunt minification? -



gruntjs - Relative paths in CSS and Grunt minification? -

before inquire question want point out there several similar questions posted here on stackoverflow, none of them provide accurate solution problem.

the problem

i have workflow setup grunt combines , minifies multiple css files 1 single file production environment.

the problem i'm facing font , image paths breaking after running grunt, they're still pointing towards existing relative file paths.

as example:

within static/homepage/startup/common-files/css/icon-font.css have next css rule:

@font-face{font-family:flat-ui-icons;src:url(../fonts/startup-icons.eot);

in gruntfile, specify want output of minified css file style.min.css located @ static/css/custom/homepage/. problem filepath changes, resulting in font , image dependencies no longer found , homecoming 404 status in browser.

what i've done seek solve this

i've figured there 2 options prepare issue:

copy dependant files they're relative new directory wherestyle.min.css resides. downside become messy , ruin project folder structure! change paths manually hand. again, what's point in this? grunt designed automating tasks!

does know how prepare problem? i've wasted 10 hours on , i'm starting give up. people have claimed have fixed issue on @ github issue page, nobody says how fixed it.

edit:

i've looked through clean-css library source code , seems can pass relativeto property minifier object. i've had mess around i'm still stuck. i'll study if farther this.

edit:

okay i've found documentation explains relativeto (and other) properties do. i'm still stuck on configuration should file construction though....

relativeto - path resolve relative @import rules , urls root - path resolve absolute @import rules , rebase relative urls roundingprecision - rounding precision; defaults 2; -1 disables rounding target - path folder or output file rebase urls

here's grunt configuration file reference:

module.exports = function(grunt) { grunt.initconfig({ concat: { homepage: { src: [ 'static/homepage/startup/common-files/css/icon-font.css', 'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css', 'static/homepage/startup/flat-ui/css/flat-ui.css', 'static/homepage/static/css/style.css' ], dest: 'static/css/custom/homepage/compiled.css', } }, cssmin: { homepage: { src: 'static/css/custom/homepage/compiled.css', dest: 'static/css/custom/homepage/style.min.css' } } }); grunt.loadnpmtasks('grunt-contrib-concat'); grunt.loadnpmtasks('grunt-contrib-uglify'); grunt.loadnpmtasks('grunt-contrib-cssmin'); grunt.loadnpmtasks("grunt-css-url-rewrite"); grunt.registertask('build', ['concat', 'cssmin']); grunt.registertask('default', ["build"]); };

thanks.

this isn't direct reply question, possible solution. imo, might improve off if refactor directory construction bit , tweek gruntfile.

new structure:

project-root /assets /styles (various css files) /scripts (js files) /images (image files) /fonts /vendor (if needed) /plugin files

if add together in few grunt tasks, such imagemin , copy, can have files placed new directory construction when saved or altered:

project-root /assets /dist /styles /styles.css /styles.min.css /scripts /scripts.min.js /images (minified images) /fonts (minified fonts)

to farther clarify:

concatenate css files dist/styles/style.css, minify file dist/styles/style.min.css concatenate js files dist/scripts/scripts.js, minify file dist/scripts/scripts.min.js use images minify images added assets/images folder , re-create dist/images use re-create copy fonts assets/fonts dist/fonts

your new workflow work within assets directory, add together of images there, of fonts, etc. however, reference assets in relation file when output dist folder.

all of stylesheets, scripts, etc. point dist folder.

plus, of assets nice , slim since of them go through kind of minification.

if need have vendor files, such plugins, etc., add together vendor directory (better yet add together them bower rather manually), , include files need in appropriate concat tasks.

css gruntjs relative-path minify grunt-contrib-concat

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more