Gulp-cssretarget NPM

gulp-cssretarget

Retarget relative CSS URLs during asset rebasing.

Install

npm install gulp-cssretarget --save

Example usage

var cssRetarget = require('gulp-cssretarget');
var useref = require('gulp-useref');
var concat = require('gulp-concat');
var gulpif = require('gulp-if');
...

var userefAssets = useref.assets({
  noconcat: true // preserve paths for gulp-cssretarget
});

// retargets relative URLs when moving from www to dist
return gulp.src('www/index.html')
  .pipe(userefAssets)
  .pipe(gulpif('**/*.css', cssRetarget({ root: 'www' })))
  .pipe(gulpif('**/*.css', concat('style.css')))
  .pipe(gulpif('**/*.js', concat('style.js')))
  .pipe(userefAssets.restore())
  .pipe(gulp.dest('dist'));

Options

options.root

Type: String Default value: ''

The directory relative to which paths are determined.

options.prepend

Type: String Default value: ''

String prepended to each asset URL.

options.suffix

Type: String Default value: ''

String added before the final extension of each asset URL (useful for proper cache busting, works great with gulp-rename's suffix option).

Example with { suffix: "-1.2.0" }:

[retarget] images/my-image.png => images/my-image-1.2.0.png ✔
[retarget] images/my-image.small.png => images/my-image.small-1.2.0.png ✔
[retarget] images/my-image.png?size=small => images/my-image-1.2.0.png?size=small ✔
[retarget] images/my-image.png#size=small => images/my-image-1.2.0.png#size=small ✔