grunt-sass-globber

2.0.3 • Public • Published

grunt-sass-globber

This is a grunt wrapper for sass-globber.

This module provides a simple globbing functionality for sass files like the ruby gem sass-globbing.

It reads a file from a defined directory and creates a new sass file with all @import statements.

It also has a build-in watcher which watches your changes in your sassRoot directory.

Installation

npm install grunt-sass-globber

Usage

Read styles.scss, process its content, and output processed SCSS/Sass to styles.tmp.scss with all @import statements. If styles.scss has:

@import "../bower-components/pg-scss/resources/scss/pg-reset";
@import "../bower-components/pg-scss/resources/scss/_helpers/**/*";
@import "global/vars";
@import "../bower-components/pg-scss/resources/scss/pg";
 
@import "utils/**/*";
 
@import "global/base";
@import "global/font-face";
@import "global/modifiers";
@import "global/get-media";
 
@import "regions**/*";
 
@import "components/**/*";
 
@import "panels/**/*";
 
@import "blocks/**/*";
 
@import "global/print";

You will get the following output:

// This file is auto generated by the module sass-globbing. 
 //Do not edit this file manually! 
 
@import "../bower-components/pg-scss/resources/scss/pg-reset";
@import "../bower-components/pg-scss/resources/scss/_helpers/_breakpoint";
@import "../bower-components/pg-scss/resources/scss/_helpers/_cp";
@import "global/vars";
@import "../bower-components/pg-scss/resources/scss/pg";
 
@import "utils/extends/_ex-fonts";
@import "utils/mixins/_mx-fonts";
 
@import "global/base";
@import "global/font-face";
@import "global/modifiers";
@import "global/get-media";
 
@import "regions/_r-footer-bottom";
@import "regions/_r-footer-top";
 
@import "components/_c-accordion";
@import "components/_c-cta";
@import "components/_c-text-image";
@import "components/form/_select";
 
@import "panels/_p-segment";
@import "panels/_p-zone";
 
@import "blocks/_b-footer-metalinks";
@import "blocks/_b-footer-nav";
 
@import "global/print";

Options

All options of sass-globber are available.

Usage

You can enable this plugin in the Gruntfile.js of your project like that:

grunt.loadNpmTasks('grunt-sass-globber');

Examples

Here is a standard grunt example with files:

sassGlobber: {
    options: {
        sassRoot: 'tmp/sass',
    },
    dev: {
        options: {
            watch: true // or false
        },
        files: [{
            'styles.tmp.scss': 'styles.scss'
        }]
    },
    dist: {
        options: {
            watch: false
        },
        files: [{
            'styles.tmp.scss': 'styles.scss'
        }]
    }
}

Instead of files you can just use the options directly:

sassGlobber: {
    options: {
        sassRoot: 'tmp/sass',
        source: 'styles.scss',
        output: 'styles.temp.scss'
    },
    dev: {
        options: {
            watch: true // or false
        }
    },
    dist: {
        options: {
            watch: false
        }
    }
}

Watch Task In Grunt

You do not need to define a watch task since version 2.0.0. Just use the option watch to use the super fast build-in watcher.

License

Copyright (c) 2015 Sebastian Fitzner. Licensed under the MIT license.

Package Sidebar

Install

npm i grunt-sass-globber

Weekly Downloads

47

Version

2.0.3

License

MIT

Last publish

Collaborators

  • sebastian-fitzner