grunt-sass-globber

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.