`@ilabdev/styles`

Gulp tasks for linting & compiling styles

Installation & set up

Install @ilabdev/styles

npm install @ilabdev/styles --save-dev

-- OR --

yarn add @ilabdev/styles --dev

Include @ilabdev/styles in your gulpfile.js

NOTE: Make sure you pass gulp through to the package as shown below. The package sets up gulp tasks and will need it passed through to work.

require( '@ilabdev/styles' )( gulp )

Add the content from config.sample.js to your .gulpconfig.js and adjust as appropriate

module.exports = {
    // Other configs here...
    styles: {
        process: true,
        watch: true,
        logColor: 'yellow',
        areas: [
            {
                paths: {
                    src: './src/scss/styles.scss',
                    watch: './src/scss/**/*',
                    dest: './dist/css',
                },
                minify: {
                    process: true,
                    separate: false,
                },
                pipes: {
                    // Put any pipe overrides here
                    src: {
                        allowEmpty: true,
                        base: './src/scss',
                        sourcemaps: true,
                    },
                    dest: {
                        sourcemaps: '.',
                    },
                },
            },
        ],
        pipes: {
            filters: {
                lint: [
                    '**/*.scss',
                ],
                build: [
                    '**/*.scss',
                    '!**/_*.scss',
                ],
            },
            watch: {
                events: 'all',
            },
            stylelint: {
                // Overrides the version of stylelint used
                stylelint: null,
                options: {
                    formatter: 'verbose',
                },
            },
            sass: {
                // Overrides the version of sass used
                sass: null,
                options: {
                    outputStyle: 'expanded',
                    errLogToConsole: true,
                },
            },
            postcss() {
                return {
                    plugins: [
                        require( 'autoprefixer' )( {
                            cascade: false,
                        } ),
                    ],
                    options: {},
                }
            },
            cssnano: {
                preset: [
                    'default',
                    {
                        cssDeclarationSorter: false,
                        svgo: false,
                    },
                ],
            },
        },
    },
    // Other configs here...
}

Run gulp styles to run the linting & compiling tasks, gulp styles:lint to run the linting task, gulp styles:build to run the compiling task, gulp styles:watch to run the watch task, or add the task as a script and run that with npm or yarn