Gulp-rcs NPM | npm.io

gulp-rcs

rcs plugin for Gulp.
Minify all CSS selectors across all files

Overview

Install

npm i rcs-core gulp-rcs -D

yarn add rcs-core 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`
    }))
...