Gulp-css-url-versioner NPM

Gulp CSS Url Versioner

A gulp plugin for versioning the CSS property: url. Based on: css-url-versioner

Getting Started

Install:

npm install --save-dev gulp-css-url-versioner

How to use:

var gulp = require('gulp'),
    cssVersioner = require('gulp-css-url-versioner');

gulp.task('styles', function () {
    return gulp.src('src/css/withoutVersion.css')
    .pipe(cssVersioner())
    .pipe(gulp.dest('dist/css/withVersion.css'));
});

With Stylus and Git

var gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    cssVersioner = require('gulp-css-url-versioner');

gulp.task('stylus', function () {
    return gulp.src('src/styles/*.styl')
    	.pipe(stylus())
		.pipe(cssVersioner({lastcommit: true}))
		.pipe(gulp.dest('dist/styles/'));
});

Input

.fancybox-overlay {
  background: url(fancybox_overlay.png);
}
@font-face {
	font-family: "OpenSans";
	font-style: normal;
	font-weight: normal;
	src: url("os.eot");
	src: url("os.eot#iefix") format('embedded-opentype'), 
		 url("os.ttf") format('truetype'), 
		 url("os.woff") format('woff'), 
		 url("os.svg#OpenSans") format('svg');
}

Output

.fancybox-overlay {
  background: url(fancybox_overlay.png?v=6bfae27);
}
@font-face {
	font-family: "OpenSans";
	font-style: normal;
	font-weight: normal;
	src: url("os.eot?v=6bfae27");
	src: url("os.eot?v=6bfae27#iefix") format('embedded-opentype'), 
		 url("os.ttf?v=6bfae27") format('truetype'), 
		 url("os.woff?v=6bfae27") format('woff'), 
		 url("os.svg?v=6bfae27#OpenSans") format('svg');
}