Awesome

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');
}

Options:

variable:

Default: v

You can customize the variable name in '?myVariable=yyyymmdd'

{variable: 'myVariable'}

version:

Default: yyyymmdd

By default the version is the current date. You can also customize it:

{version: '0.0.2'}

lastcommit:

Default: false

Set to true if you want to use the short version of your last commit as your version.

{lastcommit: true}

version: Math.random()

{version: Math.random()}

debug

Default: false

Set to true, if you want to print the relative path for each processed file

{debug: true}