node.js - How to automatically update relative CSS paths for minification? -


i update relative paths minification, because use separate folders each js/css component , folder depth can different each component, example:

css/     style.min.css // final minified , processed file     common.scss     components/         gallery/             gallery.scss // url(../../../img/mypic.png) img/     mypic.png 

after minification, style in style.min.css still have ../../../img/mypic.png. however, must updated ../img/mypic.png, otherwise webbrowsers not find picture.

how can automatically postcss or package?

i found postcss-url project , provides function custom url transformation, didn't find example how this.

right use gulp, nodejs, autoprefixer , postcss minification.

there parameter called url in postcss-url can used pass custom function postcss-url. function able modify urls postcss-url, code must manually written. here use in project:

var outdir = './src/css'; // output folder css gulp.task('min:css', function () {     return gulp         .src(cssinput)         .pipe(postcss([             autoprefixer(),             postcssurl({                 // function modify urls                 url: function (asset) {                     if (!asset.url || asset.url.indexof("base64") !== -1) {                         return asset.url;                     }                     return path.relative(outdir, asset.absolutepath).split("\\").join("/");                 }             })         ]))         ... }); 

Comments

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

angular - Is it possible to get native element for formControl? -

javascript - Why jQuery Select box change event is now working? -