Skip to content
The gulp task to the main module rename-css-selectors
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.gitignore
.travis.yml
CHANGELOG.md
README.md
index.js
package.json
yarn.lock

README.md

gulp-rcs

Build Status

rcs plugin for Gulp.

Minify all CSS selectors across all files

Overview

Install

npm i gulp-rcs -D

or

yarn add gulp-rcs --dev

Basic Usage (w/ Gulp v3)

Make sure that you load all css files first. Files should not be minified/uglified.

All files at once:

const rcs = require('gulp-rcs');

gulp.task('all', () => {
    return gulp.src(['./src/**/*.css', './src/**/*.js', './src/**/*.html'])
        .pipe(rcs())
        .pipe(gulp.dest('./dist/'));
});

Splitted (e.g. w/ gulp-sass):

const rcs = require('gulp-rcs');
const sass = require('gulp-sass');

gulp.task('css', () => {
    return gulp.src('./src/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(rcs())
        .pipe(gulp.dest('./dist/'));
});

// here we will wait until, css is finished
gulp.task('remainings', ['css'], () => {
    // note that 'scss' files are here ignored
    return gulp.src(['!./src/sass/**/*.scss', './src/**/*.js', './src/**/*.html'])
        .pipe(rcs())
        .pipe(gulp.dest('./dist/'));
});

gulp.task('default', ['css', 'remainings']);

Working with mappings (the mapping can look like this):

const rcs = require('gulp-rcs');

gulp.task('all', () => {
    return gulp.src(['./src/**/*.css', './src/**/*.js', './src/**/*.html'])
        .pipe(rcs({
            mapping: './config/renaming_map.json'
        }))
        ...
        .pipe(rcs.writeMapping('./config'))
})

options

Short example how it could look like:

const rcs = require('gulp-rcs');

gulp.task('myTask', () => {
    return gulp.src('**/*')
        .pipe(rcs([options]))
        .pipe(gulp.dest('./dist/'));
});

options.excludeFile

Excludes specific files or directories.

Type: Array or String, any valid glob statement

...
    .pipe(rcs({
        excludeFile: ['**/vendor.js', '**/another.js']
    }))
...

options.exclude

Excludes specific selectors.

Type: Array or String

...
    .pipe(rcs({
        exclude: ['any-selector', 'to-exclude']
    }))
...

options.config

Set another path to the config file. If set to false it will not load any config file.

Type: String or Boolean

...
    .pipe(rcs({
        config: './path/to/config/file'
    }))
...

options.mapping

Loads the mapping file to have always the same consistent renamings. Mappings can be loaded although they do not exist yet

Type: String

...
    .pipe(rcs({
        mapping: 'path/to/the/mapping.json'
    }))
...

options.mappingOrigValues

In case the min version of the mapping is saved, you have to set this option to false. Default: true

Type: Boolean

...
    .pipe(rcs({
        mapping: 'path/to/the/mapping_min.json',
        mappingOrigValues: false
    }))
...

options.css

Enable specific CSS files. Any given extension will be excepted.

Type: Array or String

In the following example only .css and .scss files will rename new selectors.

...
    .pipe(rcs({
        css: ['.css', '.scss']
    }))
...

options.prefix

Prefixes all selectors, excluding the exludes.

Type: String

...
    .pipe(rcs({
        prefix: 'my-super-cool-prefix-'
    }))
...

options.suffix

Suffixes all selectors, excluding the exludes.

Type: String

...
    .pipe(rcs({
        suffix: '-my-suffix'
    }))
...

options.preventRandomName

Does not rename the selectors (good for prefixing/suffixing).

Type: Boolean

...
    .pipe(rcs({
        preventRandomName: true,
        prefix: 'my-super-cool-prefix-' // prefix it, otherwise there is no real effect
    }))
...

options.replaceKeyframes

Renames the names in animation-name or animation if a specific @keyframes was triggered before. Default: false

Type: Boolean

...
    .pipe(rcs({
        replaceKeyframes: true
    }))
...

Methods

rcs.writeMapping

rcs.writeMapping(destPath[, options])

Note: This function should be at the end of the pipe (after all plugins)

This saves the mapping files to ensure all your project got the same selector replacements

options

options.cssMapping

This writes the mapping file. The original selectorname is the key. and the renamed selectorname is the value. The key has always the selector type (id # or class .). The string instead of a boolean will give the mapping an alternative name. The default name would be renaming_map

Type: Boolean or String

...
    .pipe(rcs())
    ...
    .pipe(rcs.writeMapping('./', {
        cssMapping: 'my_mapping' // this will generate the mapping in `./my_mapping.json`
    }))
...
options.cssMappingMin

This writes the mapping file. The renamed selectorname is the key. and the original selectorname is the value (so the opposite of cssMapping). The key has always the selector type (id # or class .). The string instead of a boolean will give the mapping an alternative name. The default name would be renaming_map_min

Type: Boolean or String

...
    .pipe(rcs())
    ...
    .pipe(rcs.writeMapping('./', {
        cssMapping: false, // or leave it, if you still want to have it
        cssMappingMin: 'my_mapping_min' // this will generate the mapping in `./my_mapping_min.json`
    }))
...

License

MIT © Jan Peer Stöcklmair

You can’t perform that action at this time.