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
Post a Comment