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