Code Monkey home page Code Monkey logo

css-url-versioner's Introduction

CSS Url Versioner NPM version Build Status Coveralls Status Code Climate Status

A node package for css url versioner

Getting Started

Install:

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

How to use:

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

fs.readFile('test/css/test.css', 'utf8', function (err, data) {
    var newCss = cssVersioner({
        content: data
    });
    console.log(newCss.output);
});

or

var cssVersioner = require('css-url-versioner');
var data = '.some_selector{background-image: url("img/sprite.png");}';

var cssVersioned = cssVersioner({
    content: data
});

console.log(cssVersioned.output);

//logs: '.some_selector{background-image: url("img/sprite.png?v=2014111");}';

Options:

content

Required: true

Here go the css content we want versioning

{content: '.some_selector{background-image: url("img/sprite.png");}'}

variable:

Default: v

Here go the variable of our version, for '?myVariable=yyyymmdd'

{variable: 'myVariable'}

version:

Default: yyyymmdd

Here you go a custom version if you so desire, but if we do not put this key, then the default version will be the current date.

{version: '0.0.2'}

lastcommit:

Default: false

If we want that version to be our short version of last commit in git, configured 'lastcommit' to true.

{lastcommit: true}

Examples

lastcommit: true

var cssVersioner = require('css-url-versioner');
var data = '.some_selector{background-image: url("img/sprite.png");}';

var cssVersioned = cssVersioner({
    content: data,
    lastcommit: true
});

console.log(cssVersioned.output);

//logs: '.some_selector{background-image: url("img/sprite.png?v=dc31e29");}';

lastcommit: true and variable: 'myVersion'

var cssVersioner = require('css-url-versioner');
var data = '@font-face{ 
    			font-family: 'gotham'; 
				src: url("fonts/gotham.svg#gotham") format('svg');
			}';

var cssVersioned = cssVersioner({
    content: data,
    variable: 'myVersion'
    lastcommit: true
});

console.log(cssVersioned.output);

//logs: '@font-face{ font-family: 'gotham'; src: url("fonts/gotham.svg?myVersion=dc31e29#gotham") format('svg'); }';

version: Math.random()

var cssVersioner = require('css-url-versioner');
var data = '.some_selector{background-image: url("img/sprite.png");}';

var cssVersioned = cssVersioner({
    content: data,
    version: Math.random()
});

console.log(cssVersioned.output);

//logs: '.some_selector{background-image: url("img/sprite.png?v=0.82140917");}';

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.