Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

gulp-modify-css-urls

2.0.0 • Public • Published

gulp-modify-css-urls

NPM version Build Status Coverage Status

Dependencies DevDependencies PeerDependencies

PRs Welcome Commitizen friendly semantic-release

Gulp plugin for modifying CSS URLs

Install

npm install --save-dev gulp-modify-css-urls

Usage

ES2015

/* gulpfile.babel.js */
import gulp from 'gulp';
import modifyCssUrls from 'gulp-modify-css-urls';
 
/* style.css
body {
  background-image: url('images/logo.png');
}
*/
gulp.task('modifyUrls', () =>
  gulp.src('style.css')
    .pipe(modifyCssUrls({
      modify(url, filePath) {
        return `app/${url}`;
      },
      prepend: 'https://fancycdn.com/',
      append: '?cache-buster'
    }))
    .pipe(gulp.dest('./'))
);
/* style.css
body {
  background-image: url('https://fancycdn.com/app/images/logo.png?cache-buster');
}
*/

ES5

/* gulpfile.js */
var gulp = require('gulp')
  , modifyCssUrls = require('gulp-modify-css-urls');
 
/* style.css
body {
  background-image: url('images/logo.png');
}
*/
gulp.task('modifyUrls', function () {
  return gulp.src('style.css')
    .pipe(modifyCssUrls({
      modify: function (url, filePath) {
        return 'app/' + url;
      },
      prepend: 'https://fancycdn.com/',
      append: '?cache-buster'
    }))
    .pipe(gulp.dest('./'));
});
/* style.css
body {
  background-image: url('https://fancycdn.com/app/images/logo.png?cache-buster');
}
*/

Options

modify

A function that is passed the current URL and file path and then returns the modified URL to replace the existent URL.

The modify function is always ran before append and prepend options.

append

A string that is appended to every URL.

prepend

A string that is prepended to every URL.

License

MIT

install

npm i gulp-modify-css-urls

Downloadsweekly downloads

1,188

version

2.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability