@wandiparis/gulp-styles

Compile Sass / add prefixes to generated CSS

Usage no npm install needed!

<script type="module">
  import wandiparisGulpStyles from 'https://cdn.skypack.dev/@wandiparis/gulp-styles';
</script>

README

gulp-styles

Gulp task that compiles SCSS files.

npm version

Installation

npm install --save-dev @wandiparis/gulp-styles

Usage

Default parameters :

// gulpfile.js

const styles = require("@wandiparis/gulp-styles");

const compile = styles();

export {
    compile
};

Custom parameters (see below for the full list) :

// gulpfile.js

const styles = require("@wandiparis/gulp-styles");

const compile = styles({
    src: "path/to/scss/global.scss",
    dest: "path/to/dest"
});

export {
    compile
};

Parameters

src

See gulp.src globs parameter.

Default value : 'assets/scss/*.scss'

dest

See gulp.dest path parameter.

Default value : 'web/css'

autoprefixerOptions

An Autoprefixer configuration object.

Default value :

{
    browsers: [
        'last 2 versions',
        'Firefox ESR',
        'IE >= 9',
        'BlackBerry >= 7',
        'Android >= 2'
    ],
    cascade: false,
    remove: false
}

pxToRemOptions

A postcss-pxtorem configuration object.

Default value :

{
    root_value: 16
}

cssnanoOptions

A cssnano configuration object.

Default value :

{
    autoprefixer: false,
    discardUnused: false,
    discardComments: { removeAll: true },
    zindex: false,
    reduceIdents: false,
    mergeIdents: false
}

sassOptions

A node-sass configuration object.

Default value :

{
    outputStyle: "nested"
}

production

Type: boolean

Default value : false

If production === true, then the output is minified. Be aware that the execution time is longer when you minify the output.

Minification includes the following :

lint

Type: boolean

Default value : true

Enables linting using StyleLint.